Propiedad de animación CSS
Ejemplo
Vincular una animación a un elemento <div>, usando la propiedad abreviada:
div
{
animation: mymove 5s infinite;
}
Definición y uso
La animation
propiedad es una propiedad abreviada para:
- nombre-de-animación
- duración de la animación
- función de temporización de animación
- animación-retraso
- recuento de iteraciones de animación
- animación-dirección
- modo de relleno de animación
- estado-de-reproducción-de-animación
Nota: Siempre especifique la propiedad animation-duration , de lo contrario, la duración es 0 y nunca se reproducirá.
Valor por defecto: | ninguno 0 facilidad 0 1 normal ninguno funcionando |
---|---|
Heredado: | No |
Animable: | No. Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .style.animation="mymove 5s infinito" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit-, -moz- o -o- especifican la primera versión que funcionó con un prefijo.
Property | |||||
---|---|---|---|---|---|
animation | 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- |
Sintaxis CSS
animation: name duration timing-function delay iteration-count
direction fill-mode play-state;
Valores de propiedad
Value | Description |
---|---|
animation-name | Specifies the name of the keyframe you want to bind to the selector |
animation-duration | Specifies how many seconds or milliseconds an animation takes to complete |
animation-timing-function | Specifies the speed curve of the animation |
animation-delay | Specifies a delay before the animation will start |
animation-iteration-count | Specifies how many times an animation should be played |
animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles |
animation-fill-mode | Specifies what values are applied by the animation outside the time it is executing |
animation-play-state | Specifies whether the animation is running or paused |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
páginas relacionadas
Tutorial CSS: Animaciones CSS
Referencia HTML DOM: propiedad de animación