Curso de CSS

Dale estilo y vida a la web.

Aprende CSS con ejemplos interactivos y crea proyectos reales.

Keyframes

@keyframes define una animación con varios pasos intermedios, que luego se activa (y puede repetirse) con la propiedad animation.

Cargando editor...

Resultado

Preparando resultado...

Cambia 1s por 3s en la propiedad animation y observa cómo el giro se vuelve mucho más lento.

@keyframes y animation trabajan siempre en pareja:

@keyframes nombre { }

Define los pasos de una animación con nombre propio, usando from/to o porcentajes (0%, 50%, 100%).

animation: nombre duración timing repetición;

Aplica la animación definida a un elemento: qué animación, cuánto dura, cómo se acelera y cuántas veces se repite.

infinite

Hace que la animación se repita para siempre, muy usado en indicadores de carga (loaders o spinners).

Reto rápido

Agrega un paso intermedio (50%) al @keyframes que cambie el color del borde superior.

En esta lección

Consejo

Usa porcentajes (0%, 50%, 100%) en vez de solo from/to cuando necesites más de dos pasos en tu animación.

Dato extra

El spinner de carga que ves en la esquina de esta página mientras cambias de lección usa exactamente esta misma técnica: @keyframes con rotate().

Error común

Olvidar la duración en la propiedad animation (solo poner el nombre): sin una duración explícita en segundos, la animación no se ejecuta.

Siguiente paso

Ya tienes todas las piezas de CSS: selectores, caja, layout, responsive y animación. Es momento de unirlas en un proyecto real.