¿Qué es un keyframe?

Un keyframe es un estado definido dentro de una animación CSS. Marca cómo debe verse un elemento en un porcentaje concreto del recorrido de la animación.

¿Para qué sirve un keyframe?

Un keyframe sirve para:

• Crear animaciones complejas en CSS.
• Definir cambios progresivos de estilo.
• Controlar movimiento, opacidad, escala o color.

Ejemplo básico

@keyframes aparecer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Características de un keyframe

• Se define con @keyframes.
• Puede usar from/to o porcentajes.
• Permite animar múltiples propiedades.
• Es una base de las animaciones CSS.

¿Dónde se usa?

• En interfaces web con transiciones avanzadas.
• En loaders, banners o efectos visuales.
• En experiencias interactivas de frontend.

Conclusión

Los keyframes permiten definir animaciones paso a paso en CSS. Son una herramienta clave para dar ritmo y movimiento a una interfaz.

---

---