animation-direction
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since septiembre de 2015.
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 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
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-inse convierte en una animación conease-outcuando 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
alternatepero 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
| Specification |
|---|
| CSS Animations Level 1 # animation-direction |
Compatibilidad con navegadores
Loading…