animation-direction

Experimental

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
Valor calculadocomo se especifica
Animation typediscrete

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 Level 1
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! (en-US)

Caracter铆stica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte b谩sico (Yes)-webkit (en-US) 5.0 (5.0)-moz (en-US)
16.0 (16.0)
10 12-o (en-US)
12.5 #
4.0-webkit (en-US)
reverse 19 -webkit (en-US) 16.0 (16.0) 10 Sin soporte Sin soporte
alternate-reverse 19 -webkit (en-US) 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 (en-US) 5.0 (5.0)-moz (en-US)
16.0 (16.0)
? ? ?
reverse ? (Yes)-webkit (en-US) 16.0 (16.0) ? ? ?
alternate-reverse ? (Yes)-webkit (en-US) 16.0 (16.0) ? ? ?

Consulte tambi茅n