Construir animaciones CSS con vista previa live

¿Qué hace el constructor de animación CSS?

El builder crea animaciones CSS @keyframes visualmente. Por keyframe, define el offset (0–100 %) y las propiedades — translateX, translateY, scale, rotate, opacity, color, backgroundColor, filter. La vista previa live reproduce el resultado al instante, un botón Replay reinicia la animación, el toggle Slow-Mo triplica la duración para depurar con precisión.

31 presets de animación cubren los patrones clásicos: efectos de entrada (Fade In, Slide In, Zoom In, Flip In X), disparadores de atención (Pulse, Heartbeat, Shake, Wiggle, Soft-Bounce, Tada, Rubber-Band) y animaciones de salida (Fade Out, Slide Out, Zoom Out, Collapse). Cada preset es composited-friendly — sin animaciones width/height ocultas en el stack.

La salida viene en tres formatos: CSS puro con bloque @keyframes y shorthand animation:, bloque Tailwind v4 @theme para uso class="animate-name", o snippet JavaScript Web Animations API para control programático. Los tres son paste-ready, incluido el bloque @media (prefers-reduced-motion) emitido automáticamente.

¿Por qué es obligatorio prefers-reduced-motion?

El criterio de éxito WCAG 2.2 2.3.3 «Animation from Interactions» exige que las animaciones disparadas por interacción del usuario sean desactivables por el usuario. Los navegadores lo implementan vía el media query CSS prefers-reduced-motion, que sigue los ajustes del SO: macOS «Reducir movimiento», Windows «Desactivar efectos de animación», iOS «Reducir movimiento» en las opciones de accesibilidad.

Ignorarlo excluye dos grandes grupos: personas con trastornos vestibulares (mareo, náuseas ante grandes movimientos) y personas con trastornos de atención (los contenidos animados desvían la atención continuamente). El generador no hace el fallback opcional — cada salida contiene automáticamente:

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

Cuatro estrategias están disponibles: none desactiva la animación por completo, opacity-only reduce a meras transiciones de fundido sin movimiento, instant deja correr la animación con 0,01 ms (estado final conservado, sin salto), o una pila de keyframes propia para casos complejos.

¿Qué propiedades frenan al navegador?

El render del navegador transcurre en tres fases por frame: Layout (cálculo de posiciones y tamaños), Paint (dibujado de píxeles), Compositing (apilado de capas). web.dev clasifica las propiedades según la fase que disparan:

• Composited only — transform, opacity, filter, backdrop-filter. El navegador puede delegar esas animaciones a capas compositor propias; el main-thread queda libre, 60 fps incluso en móvil son realistas.
• Paint-trigger — color, background-color, box-shadow. El navegador debe redibujar por frame. Sin impacto en desktop, perceptible en móviles de gama baja.
• Layout-trigger — width, height, top, left, margin, padding, font-size, border-width. El navegador debe recalcular todo el layout por frame, a menudo en cascada por elementos hermanos. Tirones garantizados en móvil.

El generador escanea cada keyframe y muestra una alerta con borde naranja en cuanto una propiedad layout o paint esté activa. Las sugerencias son concretas: width → transform: scaleX(), top → transform: translateY(), margin → transform: translate(). La conversión suele costar solo una propiedad keyframe — el resultado se ve idéntico.

¿Cómo funcionan las curvas de easing?

Una función de easing describe la aceleración a lo largo de la duración de la animación. linear es constante — se siente mecánica y suele ser la elección equivocada. ease-out arranca rápido, sale suave — la elección más natural para entradas UI. ease-in-out arranca y termina lento — adecuado para transiciones hover.

La mayoría de curvas estándar (CSS ease, ease-in, ease-out, ease-in-out) son más bien redondas y suaves. Para diseños refined-minimalism, la familia quint es más nítida y precisa — cubic-bezier(0.16, 1, 0.3, 1) para quint-out es el estándar del propio design system kittokit. La familia back tiene un ligero sobrepaso al final (cubic-bezier(0.175, 0.885, 0.32, 1.275) para back-out) y es la alternativa limpia a las animaciones bounce gomosas.

31 curvas preset están disponibles, agrupadas por familia: Linear, Standard, Quint, Quart, Cubic, Quad, Expo, Circ, Back, Sine, Steps. Quien necesite la curva exacta cambia al editor Cubic-Bezier y arrastra él mismo los cuatro valores de handle (x1, y1, x2, y2).

¿Cuándo merece la pena la Web Animations API?

CSS @keyframes es declarativo — el navegador gestiona el avance, JavaScript solo tiene control indirecto vía animation-play-state o class toggles. En cuanto necesite pause(), seek de currentTime, cambios de playbackRate o reverse() programático, la Web Animations API (element.animate()) es la elección limpia.

Tres casos de uso típicos:

• Scrollytelling. El progreso de la animación debe acoplarse a la posición de scroll. Con WAAPI ponga animation.currentTime = scrollProgress * animation.effect.getTiming().duration. Una animación CSS pura no puede hacerlo.
• Flujos narrativos secuenciados. Varias animaciones deben correr una tras otra, con callback tras cada paso. WAAPI da a cada retorno de animate() una interfaz Promise vía animation.finished.
• Control interactivo. Botones Pausa/Play, toggle «invertir animación», slider «saltar animación al 50 %». Con CSS-only debe alternar clases y esperar a animationend; WAAPI tiene métodos directos.

El generador emite el snippet WAAPI con un guard prefers-reduced-motion: si el usuario ha activado la reducción de movimiento, la animación corre con 1 ms en lugar de la duración completa y solo mantiene el estado final.

¿Cómo funcionan las animaciones scroll-driven?

Desde Chrome 115 (estable) y Edge 115 funciona animation-timeline: scroll() — la animación no corre por tiempo, sino por la posición de scroll del ancestro scrollable más cercano. Firefox trabaja en ello (feature flag), Safari aún no está ahí. Eso hace posibles los patrones scrollytelling clásicos (parallax, barra de progreso, pin-scrub) sin JavaScript.

El generador tiene un toggle opt-in para ello. Si está activo, la salida se envuelve en un bloque @supports (animation-timeline: scroll()):

@supports (animation-timeline: scroll()) {
  .animated {
    animation-name: myAnim;
    animation-timeline: scroll();
    animation-duration: auto;
  }
}

Los navegadores sin soporte caen silenciosamente en la animación basada en tiempo. Para producción fuera de Chrome-only se recomienda el polyfill Scroll-Driven Animations — entrega las API navegador faltantes en ~12 kB de JavaScript.

Caveat: el generador marca claramente la función como «Limited Availability». Quien active el toggle debe ser consciente de que los usuarios Safari y Firefox dependen actualmente de la animación fallback basada en tiempo.

¿Qué patrones de animación usar dónde?

Animaciones de entrada (Fade In, Slide In, Zoom In) son adecuadas para contenido que aparece tras un trigger del usuario — modal sheets, toast notifications, items de acordeón en expansión. Duración 200–400 ms con quint-out o cubic-out es la elección discreta. Duraciones más largas (>500 ms) parecen artificialmente ralentizadas.

Disparadores de atención (Pulse, Shake, Wiggle, Soft-Bounce) marcan elementos importantes — un mensaje de error de validación en un campo de formulario, un nuevo badge de notificación en el header, una indicación «campo obligatorio». Iteración infinite solo con moderación — un botón que pulsa permanentemente se vuelve rápidamente penetrante. Mejor 2–3 iteraciones tras acción del usuario, luego stop.

Animaciones de salida (Fade Out, Slide Out, Zoom Out) son la mitad olvidada con frecuencia. Quien hace entrar un modal y al cerrar simplemente pone display: none salta visualmente duro. 150–250 ms cubic-in como salida se sienten simétricos a la entrada.

Transiciones hover no son un caso de uso del constructor de animación — transition: transform 200ms var(--ease-out) basta. Las animaciones son state-driven; las transiciones son property-driven. Mantener la separación limpia.

¿Cómo uso animaciones CSS en Tailwind v4?

Tailwind v4 sustituye la config JS de la era v3 por un bloque @theme CSS-First. Las animaciones se registran vía custom properties --animate-{name}; Tailwind genera automáticamente la utility animate-{name}:

@theme {
  --animate-fadeInUp: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal both;

  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(24px);
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
    }
  }
}

De ello queda <div class="animate-fadeInUp">…</div> disponible como utility reutilizable. El generador emite ese bloque paste-ready, incluido el fallback @media (prefers-reduced-motion), scoped a la utility generada.

La salida Tailwind es la variante más compacta para design systems — la animación se define una vez y se puede reutilizar en tantos elementos como quiera. El CSS puro es la elección correcta para componentes aislados o animaciones one-off sin design system.

Preguntas frecuentes

¿Qué hace un constructor de animación CSS?

El constructor crea animaciones CSS @keyframes visualmente. Coloque stops en una timeline, elija propiedades por stop (transform, opacity, color), seleccione una curva de easing y vea el resultado en vivo. La salida es paste-ready en tres formatos — CSS puro, Tailwind v4 o Web Animations API.

¿Cómo funciona prefers-reduced-motion?

El media query CSS detecta cuándo un usuario ha activado la reducción de movimiento en los ajustes del SO. El generador emite automáticamente un bloque @media (prefers-reduced-motion: reduce) con fallback configurable — animación off, solo opacidad, instantáneo (0,01 ms) o keyframes propios. El criterio de éxito WCAG 2.2 2.3.3 lo exige para animaciones UI.

¿Qué propiedades CSS son composited y cuidan el rendimiento?

transform (translate, scale, rotate), opacity, filter y backdrop-filter los anima el navegador en capas compositor propias — sin reflow de layout, sin repaint. Las animaciones en width, height, top, left, margin fuerzan al navegador a recalcular layout por frame y dan tirones en móvil. El generador avisa en vivo cuando se anima tal propiedad y propone la alternativa transform.

¿Cuál es la diferencia entre animaciones CSS y Web Animations API?

CSS @keyframes corre de forma declarativa — el navegador gestiona el avance, usted no tiene control directo. La Web Animations API (element.animate()) le da un objeto Animation con pause(), play(), reverse(), currentTime y playbackRate. Para interacciones scroll-driven, secuencias guiadas por JavaScript y seek programático, WAAPI es la elección limpia.

¿Cómo uso animaciones CSS en Tailwind v4?

Tailwind v4 permite desde la CSS-First-Config un bloque @theme que admite custom properties --animate-{name} más sus @keyframes correspondientes directamente. Tailwind genera automáticamente la utility animate-{name}. El generador emite ese bloque paste-ready.

¿Qué son las curvas de easing Cubic-Bezier?

Una curva Cubic-Bezier describe la aceleración de una animación con cuatro puntos de control. cubic-bezier(0.16, 1, 0.3, 1) es quint-out — arranque rápido, salida suave. El diseño Refined-Minimalism favorece Quint-out para entradas UI y Back-out (ligero sobrepaso) como alternativa a bounce. El builder tiene un rail de 31 presets más un editor de handles draggables.

¿Funciona ya con fiabilidad la animación scroll-driven?

animation-timeline: scroll() es estable desde Chrome 115 y en curso en Firefox; Safari aún no está ahí. El generador emite la variante scroll-driven opcionalmente en un bloque @supports (animation-timeline: scroll()) — los navegadores sin soporte caen silenciosamente en la animación basada en tiempo. Para producción fuera de Chrome-only se recomienda el polyfill scroll-driven-animations.

¿Qué significan fill-mode: forwards y backwards?

fill-mode define qué valores se aplican antes y después de la animación. forwards mantiene la frame final — tras expirar, el elemento queda en el estado objetivo. backwards aplica la frame inicial ya durante un animation-delay. both combina ambos. none (default) suele ser la elección equivocada: el elemento vuelve a su estilo original tras la animación.

¿Cuántos keyframes son útiles?

Dos bastan para patrones clásicos Fade, Slide o Zoom — inicio y fin. Tres a cinco permiten Pulse, Shake o Wiggle con ritmo claro. Más de diez keyframes se vuelve ilegible y se acerca al comportamiento spring-physics — para eso, la Web Animations API con bucle JavaScript es la mejor elección.

¿La herramienta guarda mis animaciones?

No. Todas las entradas se quedan en la pestaña del navegador, nada se guarda ni se sube. Al recargar, el editor está vacío. Para conservar una animación, copie la salida CSS en su propio stylesheet o en tokens.css.

¿Qué herramientas CSS están relacionadas?

Otras herramientas para CSS-authoring y mantenimiento de design tokens:

• Generador de gradiente CSS — construir degradados en OKLCH/Tailwind v4.
• Generador Box-Shadow — apilar visualmente sombras multicapa.
• Playground Flexbox — aprender interactivamente el layout flex.
• Formateador CSS — formatear limpiamente CSS crudo o minificado.