CSS3 animation-directionPropiedad
Manual de referencia CSSEjemplo
Primero ejecuta la animación una vez y luego ejecútala en dirección inversa otra vez:
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari y Chrome */
-webkit-animation-direction:alternate; /* Safari y Chrome */
Pruébalo »
Soporte del navegador
Los números en la tabla indican la primera versión del navegador que soporta esta propiedad.
El número que aparece inmediatamente antes de -webkit-, -ms- o -moz- es la primera versión del navegador que soporta la propiedad con ese prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| animation-direction | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Definición y uso
La propiedad animation-direction define si la animación se reproduce en bucle, alternando la dirección inversa.
Nota:Si la animación está configurada para reproducirse solo una vez, esta propiedad no tendrá efecto.
| Valor predeterminado: | normal |
|---|---|
| Herencia: | no |
| Animable: | No. VerAnimable (animatable)。 |
| Versión: | CSS3 |
| Sintaxis de JavaScript: | object.style.animationDirection="reverse" Pruébalo |
Sintaxis CSS
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
Valores de la propiedad
| Valor | Descripción | Probar |
|---|---|---|
| normal | Valor predeterminado. La animación se reproduce normalmente. | |
| reverse | La animación se reproduce en dirección inversa. | |
| alternate | La animación se reproduce hacia adelante en los ciclos impares (1, 3, 5...) y en dirección inversa en los ciclos pares (2, 4, 6...). | |
| alternate-reverse | La animación se reproduce en dirección inversa en los ciclos impares (1, 3, 5...) y hacia adelante en los ciclos pares (2, 4, 6...). | |
| initial | Establece esta propiedad a su valor predeterminado. Verinitial。 | |
| inherit | Hereda esta propiedad del elemento padre. Verinherit。 |
Artículos relacionados
Tutorial de CSS3:Animaciones CSS3
Otras extensiones