Sintaxis de animación de fotogramas clave | Programar Plus

Declaración y uso básicos

@keyframes name-of-animation {
  0%    { opacity: 0; }
  20%   { opacity: 1; }
  80%   { opacity: 0; }
  100%  { opacity: 1; }
}

.animate-this-element {
  animation: name-of-animation 5s infinite;
}

Puede utilizar cualquier número de “paradas” en el @keyframe animación, y es una de las principales fortalezas de las animaciones de fotogramas clave. Mientras CSS transition es solo de un estado a otro, una animación de fotogramas clave puede interpolar entre muchos estados diferentes durante su línea de tiempo.

Si una animación tiene las mismas propiedades iniciales y finales, una forma de hacerlo es separar por comas los valores 0% y 100%:

@keyframes fontbulger {
  0%, 100% {
    font-size: 10px;
  }
  50% {
    font-size: 12px;
  }
}

O bien, siempre puede decirle a la animación que se ejecute dos veces (o cualquier número par de veces) y decirle la dirección a alternate.

Llamar a la animación de fotogramas clave con propiedades independientes

.box {
 animation-name: bounce;
 animation-duration: 4s; /* or: Xms */
 animation-iteration-count: 10;
 animation-direction: alternate; /* or: normal */
 animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
 animation-fill-mode: forwards; /* or: backwards, both, none */
 animation-delay: 2s; /* or: Xms */
}

Animación Taquigrafía

Simplemente separe con espacio todos los valores individuales. El orden no importa, excepto cuando se usa tanto la duración como el retraso, deben estar en ese orden. En el siguiente ejemplo, 1 s = duración, 2 s = retraso, 3 = iteraciones.

animation: test 1s 2s 3 alternate backwards;

Combinar transformación y animación

@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Varias animaciones

Puede separar los valores por comas para declarar varias animaciones en un selector.

.animate-this {
   animation: 
      first-animation 2s infinite, 
      another-animation 1s;
}

steps()

El steps() La función controla exactamente cuántos fotogramas clave se renderizarán en el intervalo de tiempo de la animación. Digamos que declaras:

@keyframes move {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}

Si usa los pasos (10) en su animación, se asegurará de que solo ocurran 10 fotogramas clave en el tiempo asignado.

.move {
  animation: move 10s steps(10) infinite alternate;
}

Las matemáticas funcionan muy bien allí. Cada segundo, el elemento se moverá 10px hacia la izquierda y 10px hacia abajo, hasta el final de la animación, y luego nuevamente en reversa para siempre.

Esto puede ser excelente para la animación de hojas de sprites como esta demostración de samurai.

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y posteriores.

Escritorio

Cromo	Firefox	ES DECIR	Borde	Safari
4 *	5 *	10	12	5,1 *

Móvil / Tableta

Android Chrome	Android Firefox	Androide	Safari de iOS
96	95	4 *	6.0-6.1 *

Más recursos

• Documentos de MDN
• MDN: uso de animación CSS
• ¿Puedo usar? Compatibilidad con navegador
• Vídeo: Introducción a las animaciones CSS

Sintaxis de proveedores antiguos

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}