¿Cómo construyo una animación CSS sin memorizar @keyframes?
@keyframes es la forma declarativa de animar en CSS. Defines un puñado de keyframes (0%, 50%, 100% o más), das a cada uno un conjunto de valores CSS (transform, opacity, color), y el navegador interpola suavemente entre ellos. El resultado es movimiento mantequilloso a 60fps sin JavaScript.
Aquí obtienes un editor visual. Pulsa un preset (fade-in, slide, bounce, shake, pulse, spin) o añade tus propios keyframes. Cada frame tiene su propio translate X/Y, escala, rotación, opacidad y color. Debajo hay una preview en vivo que se actualiza según cambies parámetros.
El panel lateral configura globales: duración, easing, iteraciones, dirección (normal / alternate), fill-mode. Pulsa "Copiar" y obtienes el CSS completo: un bloque `@keyframes` más una clase con `animation: ...`.
Cómo usar
- Pulsa un preset (fade-in, slide, bounce, pulse, spin) de la galería de abajo. Cada uno te da 2-5 keyframes listos.
- A la derecha ves la lista de keyframes (0% / 50% / 100%, etc.). Pulsa un frame para editar sus propiedades.
- Sliders: translate X/Y, scale (1 = original, 0.5 = pequeño, 2 = grande), rotate en grados, opacity 0-1, color de fondo.
- Duración (100-5000ms), easing (linear, ease, cubic-bezier), iteraciones (1, infinite), dirección (alternate = ida y vuelta).
- Copia el CSS, pégalo en una hoja de estilos y añade la clase `.target` a tu elemento. La animación arranca automáticamente.
Cuándo ayuda
Las micro-interacciones son lo que separa UI premium de barata. Una animación de 200-400ms en hover, click o reveal hace que un sitio se sienta vivo:
- Fade-in al hacer scroll. Elemento aparece cuando entra al viewport, más un pequeño translate hacia arriba = contenido que "se desliza dentro".
- Pulso en un botón CTA. Un call-to-action que pulsa suavemente atrae la mirada sin molestar (`pulse` infinite, alternate).
- Shake al fallar la validación de un formulario. El campo de password tiembla 300ms cuando está mal = feedback visual claro.
- Bounce en notificaciones toast. Un pequeño salto cuando el toast aparece deslizándose.
- Spin loader. El clásico spinner mientras esperas respuesta del servidor (`spin` infinite linear).
- Menú móvil deslizante. Menú hamburguesa que entra deslizándose desde la derecha.
- Cambio de color del hero. Gradiente de fondo cicla a través de colores, da el feel premium fintech.
Para curvas de easing personalizadas mira el generador cubic-bezier. Para otros efectos visuales mira box-shadow y clip-path.