Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Resumen

La propiedad CSS animation-direction indica si la animación 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 animación una sola vez.

Valor inicialnormal
Applies totodos los elementos y los pseudoelementos ::before y ::after
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

Gramática 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 animación se reinicia al estado inicial y comienza desde el principio. Este es el comportamiento por defecto.
alternate
La animación, al terminar un ciclo, invierte su dirección. Es decir, los pasos de la animación se ejecutan al revés. Además, las funciones de tiempo también se invierten; por ejemplo una animación ease-in se convierte en una animación con ease-out cuando se reproduce al revés. El contador que determina si la iteración es par o impar comienza en uno.
reverse
Cada ciclo de la animación se reproduce al revés . Cada vez que comienza un ciclo de animación, ésta se posiciona en el estado final y comienza desde ahí.
alternate-reverse
Es similar a alternate pero la animación se reproduce al revés. Es decir la animación 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 iteración es par o impar comienza en uno.

Ejemplos

Visitar animaciones CSS para ver algunos ejemplos.

Especificaciones

Especificación Estado Comentario
CSS Animations
La definición de 'animation-direction' en esta especificación.
Working Draft For the two new values, see the W3C discussion.

Compatibilidad entre navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico (Yes)-webkit 5.0 (5.0)-moz
16.0 (16.0)
10 12-o
12.5 #
4.0-webkit
reverse 19 -webkit 16.0 (16.0) 10 Sin soporte Sin soporte
alternate-reverse 19 -webkit 16.0 (16.0) 10 Sin soporte Sin soporte
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico ? (Yes)-webkit 5.0 (5.0)-moz
16.0 (16.0)
? ? ?
reverse ? (Yes)-webkit 16.0 (16.0) ? ? ?
alternate-reverse ? (Yes)-webkit 16.0 (16.0) ? ? ?

Consulte también

Etiquetas y colaboradores del documento

Colaboradores en esta página: teoli, Luis_Calvo, jesanchez, jsalinas
Última actualización por: teoli,