Atributo de estilo de animación

Definición y uso

animation La propiedad es una abreviatura de seis propiedades de animación:

Nota:Siempre especifique Atributo animationDurationDe lo contrario, la duración será 0 y nunca se reproducirá.

Ejemplo

Cambiar la animación del elemento <div> usando propiedades abreviadas:

document.getElementById("myDIV").style.animation = "mynewmove 4s 2";

Pruebe usted mismo

Sintaxis

Devuelve la propiedad animation:

object.style.animation

Establecer la propiedad animation:

object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"

Valor del atributo

Valor Descripción
animationName Define el nombre de los fotogramas clave que se deben asociar con el selector.
animationDuration Define cuántos segundos o milisegundos necesita la animación para completarse.
animationTimingFunction Define la curva de velocidad de la animación.
animationDelay Define el retraso antes de que comience la animación.
animationIterationCount Define cuántas veces debe reproducirse la animación.
animationDirection Define si la animación debe reproducirse en sentido inverso en el ciclo alternativo.
animationFillMode Define el valor aplicado más allá del tiempo de ejecución de la animación.
animationPlayState Define si la animación está en ejecución o en pausa.
initial Establezca este atributo en su valor predeterminado. Consulte initial.
inherit Hereda este atributo de su elemento padre. Consulte inherit.

Detalles técnicos

Valor predeterminado: none 0 ease 0 1 normal none running
Valor de retorno: Cadena de texto que representa el Atributos de animation.
Versión de CSS: CSS3

Compatibilidad del navegador

animation es una característica de CSS3 (1999).

Todos los navegadores lo soportan completamente:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Soporte Soporte Soporte Soporte Soporte 11

Páginas relacionadas

Manual de referencia de CSS:Atributos de animation