1. Fundamentos

Una animación CSS se basa en dos pilares clave:

2. Sintaxis básica de @keyframes

@keyframes nombreAnimacion {
  0%   { transform: translateX(0); opacity: 0; }
  50%  { transform: translateX(50px); opacity: 0.5; }
  100% { transform: translateX(0); opacity: 1; }
}
.elemento {
  animation: nombreAnimacion 2s ease-in-out infinite;
}

Los porcentajes (0%, 50%, 100%) representan puntos en el tiempo de la animación. Puedes usar from y to como atajos de 0% y 100%.

3. Transition vs Animation (Comparativa)

4. Ejemplos prácticos

4.1. Botón con efecto "pulse"

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.btn-pulse {
  display: inline-block;
  padding: .75rem 1.5rem;
  background: #0069d9;
  color: #fff;
  border-radius: .3rem;
  animation: pulse 1.5s ease-in-out infinite;
}

4.2. Loader circular con border

@keyframes spin {
  to { transform: rotate(360deg); }
}
.loader {
  width: 48px;
  height: 48px;
  border: 4px solid #ddd;
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

4.3. Texto que se escribe (typewriter)

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes blink {
  50% { border-color: transparent; }
}
.typewriter {
  overflow: hidden;
  border-right: .15em solid #000;
  white-space: nowrap;
  font-family: monospace;
  width: 0;
  animation: typing 3.5s steps(30) forwards, blink .75s step-end infinite;
}

5. Rendimiento y accesibilidad

• Propiedades animables: Prioriza transform y opacity porque se ejecutan en la GPU y evitan re‑flow/re‑paint.
• Reduce la duración: Mantén animation-duration bajo 200 ms para micro‑interacciones, y usa prefers-reduced-motion para respetar la preferencia del usuario.

  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }

• Hardware acceleration: Añade will-change: transform, opacity; al elemento para indicar al navegador que se animará.
• Herramientas de profiling: Usa Chrome DevTools → Performance → Screenshots para detectar “jank” y ajustar la duración o la complejidad.

6. Compatibilidad y fallback

Los navegadores modernos soportan @keyframes sin prefijos. Para compatibilidad con versiones antiguas (IE 10‑11) se recomienda:

@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
.loader {
  -webkit-animation: spin 0.8s linear infinite;
          animation: spin 0.8s linear infinite;
}

7. Buenas prácticas y checklist

1. Define siempre un animation-duration y animation-timing-function explícitos.
2. Limita el número de animaciones simultáneas a 2‑3 para evitar sobrecarga de GPU.
3. Usa variables CSS (--anim-duration) para centralizar cambios de tiempo.
4. Documenta cada @keyframes con comentarios que describan su intención.
5. Incluye la regla prefers-reduced-motion para accesibilidad.
6. Realiza pruebas en dispositivos móviles y en navegadores de bajo rendimiento.