8

That is to say, if I set an animation to take 1 second, will it always take exactly 1 second (i.e. skip frames in order to achieve that interval)?

Part 2 of my question involves how to utilize CSS animations in asynchronous Javascript calls. I would need to be able to recall the animation once it had completed.

dclowd9901
  • 6,756
  • 9
  • 44
  • 63

2 Answers2

5

The times are not guarenteed to be exactly correct. To demonstrate, I setup a test case that shows times vary a bit from the 1 second mark. As for the second part of your question, you can use the animationend event to restart it, or you can also set it to iterate (like I've done in my example).

Update It's hard to simulate the browser choking, but I have notice significant deviation from the animation when it has choked naturally. For example, upon loading the page, my Firebug started up, which caused the first animation to jump down to 0.574 seconds, almost half my original value. So it looks like the browser does try to compensate a bit, but it may also overcompensate as well. I have also seen times as long as 2 seconds, so I don't think you can say that the timing is going to be exact in any way.

Update 2 So, I was able to get the browser to choke (had to count to 1000000 in FF... I'm impressed), and the quick answer to your question is no, it does not do any compensation to try and get the time accurate. It just chokes and does not animate. Mind you that is a tight loop, so it may perform better if it can get other calculations in there, but I don't know that for sure.

LoveAndCoding
  • 7,857
  • 2
  • 31
  • 55
  • I wish I could give multiple correct answers, but this answer most closely answers my first question, and you even ran a unit test for it, which I appreciate greatly. – dclowd9901 Jan 03 '12 at 17:08
2

The answer to your question basically is all here at MDN. The gist of it is that:

  1. The times are not perfectly accurate, but they're close.
  2. There are events that fire at various times during animations (and transitions). You can attach event handlers to them.
kojiro
  • 74,557
  • 19
  • 143
  • 201
  • 1
    that doesn't actually answer the timing question, it just benchmarks that in good conditions the animations are close to the timing you ask for. The issue is more along the line of "what happens when the browser is choking?" –  Jan 03 '12 at 16:36
  • Thanks cwolves, yes this was more the gist of the first part of my question, but thank you for pointing me in the right direction for the second part, kojiro. – dclowd9901 Jan 03 '12 at 16:43