¿Por qué mi elemento vuelve al estado inicial al final?

`animation-fill-mode` por defecto es `none` — los estilos solo aplican durante la animación. Pon fill mode a `forwards` para mantener el estado final.

¿Diferencia entre iteración `1` e `infinite`?

Iteración corre los keyframes ese número de veces y para. `infinite` repite siempre — útil para spinners pero consume CPU en elementos fuera de pantalla.

¿Puedo usar estos keyframes con `prefers-reduced-motion`?

Sí, envuelve tu regla `.box` en `@media (prefers-reduced-motion: no-preference) { … }` para que usuarios sensibles al movimiento opten fuera automáticamente.

¿Por qué no se ve el easing en `spin`?

Spin es rotación a velocidad constante — easing sobre una sola variable rotacional se ve aproximadamente lineal. El easing se nota más en propiedades con estados inicial/final, como opacity o translate.

Generador de Animación CSS

Elige uno de seis patrones comunes (fade, slide, bounce, spin, pulse, shake) y ajusta duración, retraso, función de timing, iteración, dirección y fill mode con sliders en vivo. El preview ejecuta la animación en un elemento DOM real para que verifiques cómo se ve antes de copiar el bloque @keyframes más el shorthand `.box { animation: … }` para tu proyecto.

—

Preset

Duración: 1sRetraso: 0sFunción timingLoop infinitoIteracionesDirecciónFill mode

Preview

CSS generado

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.box {
  animation: fade 1s ease 0s 1 normal none;
}

CSS generado usa propiedades estándar — sin prefijos. Todos los navegadores modernos soportan unprefixed.

Cómo usar

Elige un preset (fade, slide, bounce, etc.).
Ajusta duración, retraso, easing, iteración, dirección y fill mode.
Mira el preview y copia el CSS generado.

Preguntas frecuentes

¿Por qué mi elemento vuelve al estado inicial al final?: `animation-fill-mode` por defecto es `none` — los estilos solo aplican durante la animación. Pon fill mode a `forwards` para mantener el estado final.
¿Diferencia entre iteración `1` e `infinite`?: Iteración corre los keyframes ese número de veces y para. `infinite` repite siempre — útil para spinners pero consume CPU en elementos fuera de pantalla.
¿Puedo usar estos keyframes con `prefers-reduced-motion`?: Sí, envuelve tu regla `.box` en `@media (prefers-reduced-motion: no-preference) { … }` para que usuarios sensibles al movimiento opten fuera automáticamente.
¿Por qué no se ve el easing en `spin`?: Spin es rotación a velocidad constante — easing sobre una sola variable rotacional se ve aproximadamente lineal. El easing se nota más en propiedades con estados inicial/final, como opacity o translate.

Herramientas relacionadas

Generador de Curva Cubic-Bezier CSS

Arrastra los puntos de control para diseñar una curva de easing CSS — previsualiza el movimiento, copia cubic-bezier().

Color 0 0

Playground de CSS Flexbox

Elige visualmente flex-direction, justify-content, align-items y gap — copia el CSS o la clase Tailwind.

Desarrollo 0 0

Playground de CSS Grid

Elige visualmente grid-template-columns / rows, gap y alineación de ítems — copia el CSS a tu proyecto.

Desarrollo 0 0

Playground de Filtros CSS

Compón visualmente blur, brightness, contrast, hue, sepia, invert y más — copia el filtro CSS o el valor arbitrario de Tailwind.

Color 0 0

Vista previa de CSS color-mix()

Compara cómo la función moderna CSS color-mix() mezcla dos colores en distintos espacios de interpolación (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — muestras en vivo, hex calculado, tira de gradiente completa por espacio y CSS copiable.

Color 0 0

Generador Open Graph y Twitter Card

Rellena un formulario, obtén un bloque `<meta>` listo para pegar — Open Graph para Facebook / LinkedIn / Slack y etiquetas Twitter Card para X / Discord.

Desarrollo 0 0