animation-direction

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since septiembre de 2015.

Learn more
See full compatibility

Experimental: Esta es una tecnologa experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en produccin.

Resumen

La propiedad CSS animation-direction indica si la animacin debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.

Es conveniente usar la propiedad abreviada animation para ajustar todas las propiedades de animacin una sola vez.

Valor inicial	`normal`
Applies to	todos los elementos y los pseudoelementos `::before` y `::after`
Heredable	no
Valor calculado	como se especifica
Animation type	Not animatable

Sintaxis

Gramtica formal: [ normal | reverse | alternate | alternate-reverse ] [, [ normal | reverse | alternate | alternate-reverse ] ]*

animation-direction: normal
animation-direction: reverse
animation-direction: alternate
animation-direction: alternate-reverse
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal

Valores

normal: Cada vez que termina un ciclo, la animacin se reinicia al estado inicial y comienza desde el principio. Este es el comportamiento por defecto.
alternate: La animacin, al terminar un ciclo, invierte su direccin. Es decir, los pasos de la animacin se ejecutan al revs. Adems, las funciones de tiempo tambin se invierten; por ejemplo una animacin ease-in se convierte en una animacin con ease-out cuando se reproduce al revs. El contador que determina si la iteracin es par o impar comienza en uno.
reverse: Cada ciclo de la animacin se reproduce al revs . Cada vez que comienza un ciclo de animacin, sta se posiciona en el estado final y comienza desde ah.
alternate-reverse: Es similar a alternate pero la animacin se reproduce al revs. Es decir la animacin se posiciona en el estado final, comienza a reproducirse al reves y, cuando llega al inicio vuelve a reproducirse de forma normal hasta llegar al final de la secuencia. Y vuelve otra vez a repetirse. El contador que determina si la iteracin es par o impar comienza en uno.