English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
El atributo CSS animation es una abreviatura de las siguientes propiedades:Animación-nombre,Animación-duración,Animación-tiempo-función,Animación-retraso,Animación-iteración-cuenta,Animación-dirección,Animación-relleno-modoyAnimación-reproducir-estado.
La siguiente tabla resume el contexto de uso y el historial de versiones de esta propiedad.
| Valor predeterminado： | none 0 ease 0 1 normal none running; |
|---|---|
| Aplicable a： | Todos los elementos::before y::after Elemento pseudo |
| Herencia： | Ninguno |
| Animable: | No.Consulte Atributo de animación. |
| Versión： | CSS3nueva funcionalidad |
| Sintaxis de JavaScript: | object.style.animation="mymove 5s infinite" |
La sintaxis de esta propiedad es la siguiente:
animation: [ name duration timing-function delay iteration-count direction fill-mode play-state ] | initial | inherit
El siguiente ejemplo muestra cómo utilizar la propiedad animation.
.box {
ancho: 50px;
altura: 50px;
fondo: rojo;
position: relativo;
/* Chrome, Safari, Opera */
-webkit-animation: moveit 2s linear 0s infinito alternativo;
animation: moveit 2s linear 0s infinito alternativo;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Prueba a ver‹/›Nota:Debe especificarse al menos dos propiedades animation-name y animation-duración (mayor que 0), para que la animación se realice.
La siguiente tabla describe los valores de esta propiedad.
| Valor | Descripción |
|---|---|
| Animación-nombre | Especificar el nombre de la animación definida por @keyframes que debe aplicarse al elemento seleccionado. |
| Animación-duración | Especificar el tiempo necesario para completar un ciclo de animación en segundos o milisegundos. |
| Animación-tiempo-función | Especificar cómo debe realizarse la animación en cada ciclo de duración, es decir, la función de suavizado. |
| Animación-retraso | Especificar el retraso antes de que la animación comience. |
| Animación-iteración-cuenta | Especificar el número de veces que debe reproducirse la animación antes de detenerse. |
| Animación-dirección | Especificar si la animación debe reproducirse en sentido inverso en el ciclo alternativo. |
| Animación-relleno-modo | Especificar cómo se debe aplicar el estilo al objetivo de la animación antes y después de su ejecución. |
| Animación-reproducir-estado | Especificar si la animación debe ejecutarse o pausarse. |
| initial | Establecer este atributo en su valor predeterminado. |
| inherit | Si se especifica, el elemento asociado utiliza el valor calculado de la propiedad animation de su elemento padre. |
Compatibilidad del navegador de la propiedad de animación, todos los navegadores principales admiten esta propiedad. Los números representan la versión del primer navegador que admite esta propiedad.
|
Consulte la siguiente guía:CSS3Animación.
Atributos y reglas relacionados:Animación-nombre,Animación-duración,Animación-tiempo-función,Animación-retraso,Animación-iteración-cuenta,Animación-dirección,Animación-relleno-modo,Animación-reproducir-estado,@keyframes.