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

cssselector {
  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:

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

css@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:

css@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