Animation Name

El nombre es el hilo invisible que conecta todo

Imagina que escribes una canción y la guardas en un estudio de grabación bajo un nombre. Más tarde, cuando quieres que suene en un local, llamas al estudio y dices ese nombre. El estudio la busca y la reproduce. Si el nombre que recuerdas no coincide exactamente con el nombre que usaste al guardarla, el estudio no sabe de qué hablas.

Eso es exactamente lo que ocurre con animation-name. Tú defines un bloque @keyframes con un nombre, y luego usas ese nombre en la propiedad animation-name del selector CSS. El navegador busca ese nombre y conecta los fotogramas al elemento. Si hay cualquier diferencia —un carácter extra, una mayúscula distinta— la animación simplemente no ocurre, sin ningún mensaje de error.

Cómo funciona la vinculación

La vinculación entre keyframes y elemento es estrictamente por coincidencia de nombre. Y aquí hay algo que atrapa a mucha gente: la propiedad es case-sensitive. fadeIn y fadein son nombres completamente distintos para el navegador.

/* 1. Definimos la animación */
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* 2. La vinculamos al elemento */
.toast-notification {
  animation-name: slideInRight;
  animation-duration: 0.4s;
}

Convenciones de nomenclatura que usan los profesionales

No existe un estándar oficial, pero hay dos convenciones que dominan el mundo real:

• kebab-case: Todo en minúsculas, palabras separadas por guiones: fade-in-down, rotate-spinner, slide-from-right. Es el preferido para CSS puro por su legibilidad.
• camelCase: Primera palabra en minúscula, resto capitalizadas: fadeInDown, rotateSpinner. Muy común cuando el CSS lo genera o consume JavaScript.

El consejo más valioso: elige la convención que te resulte más natural y apégate a ella en todo el proyecto. La inconsistencia es enemiga del mantenimiento.

Los nombres que jamás debes usar

• none: Le dice al navegador que no hay ninguna animación aplicada. Usar este nombre en tu @keyframes causará conflictos imposibles de depurar.
• initial, inherit, unset, default: Son palabras clave globales de CSS. El navegador las interpretará como instrucciones, no como nombres.

Aplicar más de una animación al mismo elemento

Una de las capacidades más poderosas de CSS es que puedes ejecutar múltiples animaciones simultáneamente en el mismo elemento, simplemente separando los nombres por comas. Cada animación mantiene sus propias propiedades de duración, delay y easing:

.hero-image {
  animation-name: fadeIn, floatEffect;
  animation-duration: 1s, 4s;
}