Animaciones con keyframes en CSS

Una secuencia de estados con nombre, repetible y reproducible.

@keyframes xp-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes pulse {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

.xp.pop {
  animation: xp-pop 320ms ease-out 1 forwards;
}

.loading {
  animation: pulse 1s ease-in-out infinite alternate;
}

Cómo funciona

1. @keyframes lista los pasos como porcentajes o con from y to.
2. El orden del shorthand es nombre, duración, easing y conteo.
3. forwards conserva el cuadro final al terminar.

Palabras clave y builtins usados aquí

• animation
• keyframes
• ms
• opacity
• s
• scale
• transform

El intento, en números

Líneas

18

Caracteres a escribir

299

Tokens

85

Ritmo de tres estrellas

90 tpm

Al ritmo de tres estrellas de 90 tokens por minuto, este intento toma unos 57 segundos.

Escribe este fragmento

Paso 3 de 8 en Movimiento y efectos; paso 13 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →