Propiedad animation

La propiedad animation es una propiedad abreviada para animación, permite establecer todas las propiedades para la animación simultáneamente: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

El orden de los valores no importa, el tiempo de duración de la animación animation-duration debe obligatoriamente colocarse antes del retardo animation-delay. Las únicas propiedades obligatorias son animation-name y animation-duration.

La propiedad también puede tomar el valor none, que desactiva la animación por completo. Este valor es el valor por defecto.

Sintaxis

selector {
	animation: valores;
}

Ejemplo

En este ejemplo, antes de la animación habrá un retardo de 3 segundos (antes de cada nueva reproducción), y luego la animación se reproducirá durante 6 segundos:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation: move 6s infinite 3s linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Ejemplo . Posibles problemas

Una animación, escrita en forma abreviada, puede no funcionar debido a su nombre. Veamos la siguiente animación:

@keyframes reverse {
	from {
		left: 0;
	}
	to {
	  left: 300px;
	}
}

Fíjese, estoy usando el nombre de animación reverse. A primera vista, todo está bien, pero la animación no funciona, porque reverse es una palabra clave válida para la propiedad animation-direction.

Tampoco la animación funcionará al usar en forma abreviada en el nombre otras palabras clave. Pero todo funciona bien al usar la forma "completa" de descripción.

Entre las palabras clave-valores de animation-direction que rompen las animaciones, se deben incluir también las palabras clave relacionadas con las funciones de suavizado, así como infinite, alternate, running, paused y así sucesivamente.

Véase también

la regla @keyframes,
que define los fotogramas clave de la animación
las transiciones suaves transition, que representan una animación al pasar el cursor sobre un elemento