Plantillas de animación @keyframes CSS

Funciones

• Siete presets: fundido, deslizamiento hacia arriba, rebote, latido, temblor, giro y flotación
• Duración de 100 a 10000ms y cinco curvas de aceleración
• Se puede repetir en bucle o reproducir una sola vez
• En la previa se repite en bucle y se pausa al pasar el cursor, para ver un fotograma
• Incluye automáticamente el tratamiento de `prefers-reduced-motion`, respetando el ajuste de reducir movimiento del sistema
• El nombre de la animación lleva un sufijo aleatorio, así no choca con keyframes del mismo nombre en tu proyecto
• El código entregado trae las dos partes, `@keyframes` y la regla de uso, listas para pegar
• Debajo el código lleva coloreado de sintaxis y un botón de copiar
• Todo se ejecuta en tu navegador: no se sube nada

Cómo se usa

1. Elige una animación; la previa empieza a repetirse en bucle al momento
2. Ajusta duración y curva — en el giro acuérdate de usar linear, porque con una curva se nota un "tirón"
3. Decide si se repite en bucle o se reproduce una vez
4. Copia el código, y no olvides llevarte también el bloque `prefers-reduced-motion`

Preguntas frecuentes

¿Por qué el código añade solo un bloque de `prefers-reduced-motion`?

Porque las animaciones marean, y eso no es poca cosa. Las personas con un trastorno vestibular (un problema del oído interno) se marea y sienten náuseas con las animaciones de desplazamiento y escala, y en el sistema operativo hay un interruptor pensado para ellas: `prefers-reduced-motion`. Con esas tres líneas, esas personas no lo pasan mal en tu web — y el coste son tres líneas de CSS. No es "un punto extra de accesibilidad", es el mínimo para no incomodar a nadie.

¿Por qué el nombre de la animación lleva una cadena aleatoria detrás?

Porque los nombres de `@keyframes` son globales. Si en tu proyecto ya hay un keyframe llamado `fade-in`, el bloque que pegues lo pisará (o será pisado por él) — y el síntoma es "en algunos sitios la animación hace otra cosa", que aparece y desaparece, dificilísimo de localizar. Con un sufijo aleatorio es imposible que choquen. De paso resuelve otra trampa: al cambiar los parámetros, el navegador considera que el keyframe ha cambiado y vuelve a reproducir la animación.

¿Qué problema tiene una animación en bucle infinito?

Dos. Uno es que roba la atención: algo que se mueve sin parar arrastra la mirada, así que si es solo un adorno no debería reproducirse en bucle salvo en situaciones de "en curso". El otro es que ocupa el hilo de composición de forma continua, y en equipos modestos o en modo de ahorro de energía gasta batería de forma perceptible. Por eso: un indicador de carga, donde "el estado es la propia animación", sí puede ir en bucle; un aviso o una flotación decorativa es mejor que se reproduzca una o dos veces y pare, o que se limite con `animation-iteration-count: 3`.

¿Cómo hago que las animaciones de entrada aparezcan una tras otra?

Dale a cada elemento un `animation-delay` creciente: el primero 0ms, el segundo 80ms, el tercero 160ms… Ojo con dos cosas: el total no debería pasar de cinco o seis elementos (a partir de ahí, los últimos esperan tanto que el usuario ya ha apartado la mirada); y durante el retardo el elemento se queda en su estado inicial (es decir, transparente o desplazado), así que si no quieres que "aparezca primero y luego salte", acompáñalo de `animation-fill-mode: backwards`.