2012-01-03 11 views
9

Es decir, si configuro una animación para tomar 1 segundo, ¿siempre tomará exactamente 1 segundo (es decir, salteará los fotogramas para lograr ese intervalo)?¿Las animaciones CSS funcionan en un tiempo estricto?

La parte 2 de mi pregunta trata sobre cómo utilizar animaciones CSS en llamadas Javascript asíncronas. Necesitaría poder recordar la animación una vez que se haya completado.

Respuesta

4

No se garantiza que los tiempos sean los correctos. Para demostrar, configuré un test case que muestra que los tiempos varían un poco desde la marca de 1 segundo. En cuanto a la segunda parte de su pregunta, puede usar el evento animationend para reiniciarlo, o también puede configurarlo para iterar (como he hecho en mi ejemplo).

Actualización Es difícil simular la asfixia del navegador, pero he notado una desviación significativa de la animación cuando se ha ahogado de forma natural. Por ejemplo, al cargar la página, mi Firebug se puso en marcha, lo que provocó que la primera animación saltara hacia abajo a 0.574 segundos, casi la mitad de mi valor original. Parece que el navegador intenta compensar un poco, pero también puede compensar en exceso. También he visto tiempos de hasta 2 segundos, así que no creo que puedas decir que el tiempo será exacto de ninguna manera.

Actualización 2 lo tanto, yo era capaz de get the browser to choke (tenía que contar hasta 1.000.000 en FF ... Estoy impresionado), y la respuesta rápida a su pregunta es no, no hace ningún tipo de compensación a tratar y obtener la hora exacta. Simplemente estrangula y no anima. Ten en cuenta que es un circuito cerrado, por lo que puede funcionar mejor si puede obtener otros cálculos, pero no estoy seguro.

+0

Ojalá pudiera dar varias respuestas correctas, pero esta respuesta responde muy de cerca a mi primera pregunta, e incluso se realizó una prueba de unidad, que aprecio mucho. – dclowd9901

2

La respuesta a su pregunta básicamente es here at MDN. La esencia de esto es que:

  1. Los tiempos no son exactamente exactos, pero están cerca.
  2. Hay eventos que se activan varias veces durante las animaciones (y transiciones). Puede adjuntar controladores de eventos a ellos.
+1

que en realidad no responde a la pregunta sobre el tiempo, solo establece que en buenas condiciones las animaciones están cerca del tiempo que usted solicita. El problema está más en la línea de "¿qué sucede cuando el navegador se está ahogando?" –

+0

Gracias cwolves, sí, esto fue más la esencia de la primera parte de mi pregunta, pero gracias por apuntarme en la dirección correcta para la segunda parte, kojiro. – dclowd9901

Cuestiones relacionadas