Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

animation-direction

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

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
Animatableno
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
The definition of 'animation-direction' in that specification.
Working Draft For the two new values, see the W3C discussion.

Compatibilidad entre navegadores

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 Not supported Not supported
alternate-reverse 19 -webkit 16.0 (16.0) 10 Not supported Not supported
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,