Animaciones movidas por el scroll en CSS

La línea de tiempo es la posición del scroll y no el reloj, y no cuesta nada de JavaScript.

@keyframes fade-up {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: none; }
}

.reveal {
  animation: fade-up linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 40%;
}

.progress-bar {
  transform-origin: left center;
  animation: grow linear both;
  animation-timeline: scroll(root block);
}

@keyframes grow { from { scale: 0 1; } to { scale: 1 1; } }

Cómo funciona

1. animation-timeline: scroll() ata el progreso a un ancestro con scroll.
2. view() lo ata en cambio al paso del propio elemento por el viewport.
3. animation-range dice qué parte de ese viaje cubre la animación.

Palabras clave y builtins usados aquí

• animation
• keyframes
• opacity
• rem
• scale
• transform
• translateY

El intento, en números

Líneas

18

Caracteres a escribir

399

Tokens

100

Ritmo de tres estrellas

90 tpm

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

Escribe este fragmento

Paso 6 de 8 en Movimiento y efectos; paso 16 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →