Stagger

Un título se divide en caracteres, palabras o líneas que se animan una tras otra con un pequeño retraso.

Añade una entrada "Split Text Stagger" (también llamada letter stagger o staggered text reveal) en [dónde].
Divide el título en letras que suban y aparezcan una tras otra con un breve retraso entre ellas, rápido y suave, sin rebote.
Reprodúcela una sola vez cuando el título entre en pantalla, haz que los lectores de pantalla lo lean como una sola palabra y muéstralo sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Los elementos aparecen deslizándose al añadirse y salen animados al eliminarse mientras los vecinos cierran el hueco.

Añade una animación "List Item Enter/Exit" (también llamada animated list) en [dónde].
Un elemento nuevo debe abrir primero su espacio y luego aparecer deslizándose; un elemento eliminado debe desvanecerse primero y luego plegarse para que sus vecinos cierren el hueco con suavidad.
Mantén el elemento eliminado en su sitio hasta que termine su salida, para que la lista nunca salte al añadir o quitar elementos.

El elemento sube una distancia corta mientras aparece, como si se asentara en su lugar.

Añade una animación de entrada "Fade Up" (también llamada fade-in-up o reveal on scroll) en [dónde].
Los elementos deben subir ligeramente mientras aparecen la primera vez que entran en pantalla al hacer scroll: sutil y rápido, sin rebote.
Reprodúcela una sola vez y omite el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una animación se reproduce una vez cuando un elemento entra o sale del viewport.

Añade una "Scroll-Triggered Animation" (también llamada reveal on scroll o animate on scroll) en [dónde].
Cada elemento debe aparecer con un fundido y subir a su sitio una sola vez al entrar en pantalla, a su propio ritmo rápido y suave en lugar de seguir la posición del scroll.
Mantén el contenido visible si los scripts no cargan y muestra los elementos de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento gira y crece desde un punto mientras aparece.

Añade una animación de entrada "Swirl In" (también llamada swirl in forward) en [dónde].
El elemento debe girar bastante más de una vuelta completa mientras crece desde un solo punto hasta su tamaño completo y aparece: rápido al principio, frenando al asentarse.
Reprodúcela una sola vez en un único elemento en lugar de en todo un grupo, y muéstralo en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras empiezan muy separadas y tenues, y se juntan hasta el espaciado normal mientras aparecen.

Añade una animación de texto "Tracking In" (también llamada text tracking in o letter-spacing in) en [dónde].
Las letras deben empezar muy separadas y tenues, y juntarse hasta el espaciado normal mientras se vuelven totalmente visibles: suave, frenando al final.
Mantén el texto centrado y en una sola línea mientras cambia el espaciado para que el diseño de alrededor no se mueva, y muéstralo con el espaciado normal si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento crece desde un estado pequeño y transparente hasta su tamaño completo mientras aparece.

Añade una animación de entrada "Zoom In" (también llamada scale in) en [dónde].
El elemento debe crecer de pequeño y transparente a su tamaño completo mientras aparece: rápido y suave, sin pasarse de tamaño.
Escálalo desde su centro sin afectar al diseño que lo rodea, y muéstralo en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).