Atributo animation CSS

Definición y uso

animation El atributo es un atributo abreviado que se utiliza para establecer seis propiedades de animación：

Comentarios：Por favor, establezca siempre： animation-duration Si no se especifica el atributo, el tiempo de reproducción será 0 y no se reproducirá el animación.

Por favor, consulte：

Tutoriales de CSS3：Animación de CSS

Manual de referencia de DOM HTML：property de animación

Ejemplo

Utilice las propiedades abreviadas para enlazar la animación con el elemento div:

div
{
animation:mymove 5s infinite;
}

Prueba personalmente

Sintaxis de CSS

animation: name duration timing-function delay iteration-count direction;
Valor Descripción
animation-name Define el nombre del keyframe que se debe enlazar al selector.
animation-duration Define el tiempo que lleva completar la animación, en segundos o milisegundos.
animation-timing-function Define la curva de velocidad de la animación.
animation-delay Define el retraso antes de que la animación comience.
animation-iteration-count Define el número de veces que debe reproducirse la animación.
animation-direction Define si la animación debe reproducirse alternativamente en reversa.
animation-fill-mode Define los valores aplicados fuera del tiempo de ejecución de la animación.
animation-play-state Define si la animación está en ejecución o en pausa.

Detalles técnicos

Valor por defecto: none 0 ease 0 1 normal
Herencia: no
Versión: CSS3
Sintaxis de JavaScript: object.style.animation="mymove 5s infinite"

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite completamente la propiedad.

Los números con -webkit-、-moz- o -o- indican la primera versión de la propiedad con prefijo utilizada.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
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-