AZ Tools

Generador de Animación CSS

Desarrollo

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

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

  1. Elige un preset (fade, slide, bounce, etc.).
  2. Ajusta duración, retraso, easing, iteración, dirección y fill mode.
  3. 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

Decodificador JWT

Decodifica un JSON Web Token para ver su cabecera, claims y expiración.

Desarrollo00

Generador de UUID

Genera UUID v4 aleatorios en lote, con copia.

Desarrollo00

Generador de Hash (SHA)

Genera hashes SHA-1, SHA-256, SHA-384 y SHA-512 a partir de texto.

Desarrollo00

Codificador / Decodificador de URL

Codifica texto para URLs en porcentaje, o decodifica URLs a texto.

Desarrollo00

Codificador / Decodificador Base64

Codifica texto a Base64 o decodifica Base64 a texto al instante.

Desarrollo00

Formateador y Validador de JSON

Formatea, embellece, minifica y valida JSON en tu navegador.

Desarrollo00