Sintaxis de @keyframes

El lenguaje que habla el navegador

Imagina que quieres contratar a un equipo de arquitectos para construir tu casa. Puedes explicarles en voz alta lo que necesitas, pero si no entregan los planos en el formato correcto —con las medidas en las unidades adecuadas, las especificaciones en el lugar exacto— nada de lo que describan se construirá. La sintaxis es exactamente eso: el formato estricto que permite que tus instrucciones se conviertan en algo real.

En CSS Animations, dominar la sintaxis de @keyframes es la diferencia entre una animación que funciona en todos los navegadores y una que desaparece silenciosamente sin generar ningún error visible. Y lo más frustrante de los errores de sintaxis es precisamente eso: no gritan, simplemente no sucede nada.

La estructura: tres ingredientes obligatorios

Un bloque @keyframes válido siempre tiene tres partes. Primero la palabra reservada @keyframes. Luego el nombre que tú le asignas —ese nombre es el hilo que conectará la animación con el elemento en tu HTML. Finalmente, entre llaves, los fotogramas: cada uno definido por su posición en el tiempo (0%, 50%, 100%) y los estilos que el elemento debe tener en ese instante exacto.

La forma corta: from y to

Cuando tu animación solo necesita un estado inicial y uno final —como un elemento que aparece fundido o que se desliza hacia arriba— puedes usar from y to en lugar de 0% y 100%. Son exactamente equivalentes, pero hacen el código más legible cuando la intención es simple:

@keyframes deslizar {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

La forma larga: el control total con porcentajes

Ahora imagina que una notificación debe aparecer, detenerse un momento en el centro de la pantalla para que el usuario la lea, y luego desaparecer suavemente. Eso ya son tres momentos distintos: 0% (inicio), 40%–60% (pausa en el centro), 100% (salida). Aquí es donde los porcentajes te dan el control exacto que from/to no puede ofrecer.

Puedes colocar un fotograma en cualquier punto entre 0% y 100%, incluso en valores decimales como 33.5%. El navegador calculará el movimiento entre cada par de fotogramas adyacentes.

El truco de agrupar porcentajes

Cuando quieres que el elemento esté completamente oculto tanto al inicio como al final (y solo visible en el medio), escribirías los mismos estilos en dos líneas separadas. CSS te permite evitar esa repetición agrupando los porcentajes con comas:

@keyframes parpadeo {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

Las reglas para elegir nombres

• Elige nombres descriptivos que expliquen el efecto: spin-loading, slide-from-bottom, error-shake.
• Puedes usar letras, números, guiones (-) y guiones bajos (_).
• Nunca comiences con un número ni uses espacios.
• Evita palabras reservadas de CSS como none, initial, inherit o unset — el navegador las interpretaría como valores del lenguaje, no como nombres.