La regla-at @keyframes
La regla-at @keyframes se utiliza para definir una secuencia de fotogramas de una animación CSS.
La sintaxis
Como las demás reglas-at, @keyframes es un bloque de código que empieza con la palabra clave @keyframes seguida por el nombre de la animación. A continuación entre llaves {} aparecen todas las reglas CSS que definen una secuencia de fotogramas.
@keyframes nombreAnimacion {
/*las reglas para nombreAnimacion */
}Veamos un caso práctico: una animación donde el color de fondo de un elemento HTML cambiará de rojo ( #f00 ) a rojo oscuro (#e00 ). La animación cuenta con dos fotogramas: al principio ( 0% ) y al final ( 100% ).
@keyframes cambiarColor {
0% { background-color: #f00;}
100% { background-color: #e00;}
}¡Ojo!: los selectores de las fotogramas 0% y 100% son porcentajes y tienen que llevar el símbolo %. También podemos utilizar como selectores las palabras clave from ( desde ) en lugar de 0% y to ( hasta ) en lugar de 100%.
@keyframes cambiarColor {
from { background-color: #f00;}
to { background-color: #e00;}
}En el caso de que queramos que el color parpadee podemos escribir algo así:
@keyframes cambiarColor {
0% { background-color: #f00;}
25% { background-color: #e00;}
50% { background-color: #f00;}
75% { background-color: #e00;}
100% { background-color: #f00;}
}O para evitar tanta verbosidad podemos abreviar todo este código así:
@keyframes cambiarColor {
0%, 50% , 100% { background-color: #f00;}
25%, 75% { background-color: #e00;}
}También podemos animar varias propiedades a la vez.
@keyframes latido {
0%, 50% , 100% {
color: #e00;
transform:scale(1);
}
25%, 75% {
color: #f00;
transform:scale(1.25);
}
}Es importante que las propiedades modificadas en el bloque de código @keyframes puedan ser animadas ( animatables ).
De lo contrario estas reglas serán ignoradas. . . con una excepción.
La propiedad animation-timing-function ( función de temporizador de la animación ) puede ser utilizada en el bloque de código @keyframes para especificar la curva de velocidad de la animación.
@keyframes latido {
0%, 50% , 100% {
color: #e00;
transform:scale(1);
animation-timing-function: ease-in;;
}
25%, 75% {
color: #f00;
transform:scale(1.25);
animation-timing-function: ease-out;;
}
}See the Pen @keyframes latido by Gabi (@enxaneta) on CodePen.
Actualmente las reglas-at @keyframes están soportadas en todos los navegadores modernos. Para soporte en los navegadores antiguos es recomendable utilizar una librería JavaScript externa como por ejemplo prefixfree