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;;
    }  
}
Actualmente las reglas-at @keyframes están soportadas en todos los navegadores modernosstar. Para soporte en los navegadores antiguos es recomendable utilizar una librería JavaScript externa como por ejemplo prefixfreestar