Работают ли CSS анимации строго по времени? - PullRequest
9 голосов
/ 03 января 2012

То есть, если я установлю анимацию на 1 секунду, она всегда будет занимать ровно 1 секунду (т. Е. Пропуск кадров для достижения этого интервала)?использовать CSS-анимацию в асинхронных вызовах Javascript.Мне нужно будет вспомнить анимацию после ее завершения.

Ответы [ 2 ]

4 голосов
/ 03 января 2012

Время не гарантируется, чтобы быть точно правильным. Для демонстрации я установил контрольный пример , который показывает, что время немного отличается от отметки в 1 секунду. Что касается второй части вашего вопроса, вы можете использовать событие animationend, чтобы перезапустить его, или вы также можете настроить его на итерацию (как я делал в моем примере).

Обновление Трудно смоделировать удушение браузера, но я заметил значительное отклонение от анимации, когда она задыхалась естественным образом. Например, после загрузки страницы мой Firebug запустился, что привело к тому, что первая анимация прыгнула с вниз до 0,574 секунды, почти вдвое меньше моего первоначального значения. Таким образом, похоже, что браузер действительно пытается компенсировать немного, но это также может компенсировать также. Я также видел моменты продолжительностью до 2 секунд, поэтому я не думаю, что вы можете сказать, что время будет точным в любом случае.

Обновление 2 Итак, я смог заставить браузер захлебнуться (пришлось считать до 1000000 в FF ... я впечатлен), и быстрый ответ на Ваш вопрос - нет, он не дает никакой компенсации, чтобы попытаться получить точное время. Он просто задыхается и не оживляет. Имейте в виду, что это узкий цикл, поэтому он может работать лучше, если он может использовать другие вычисления, но я точно не знаю.

2 голосов
/ 03 января 2012

Ответ на ваш вопрос в основном все здесь, в MDN . Суть в том, что:

  1. Время не совсем точное, но оно близко.
  2. Есть события, которые запускаются в разное время во время анимации (и переходы ). Вы можете прикрепить к ним обработчики событий.
...