Generador de animaciones CSS
Previsualiza animaciones de keyframes como fundido, rebote o deslizamiento y genera el CSS
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Reproduce en tiempo real animaciones habituales como fundido, deslizamiento, zoom, rebote, pulso, sacudida y giro para verlas, y copia el CSS ya terminado con @keyframes y las propiedades de animation. Al ajustar la duración, el retardo, el easing y las repeticiones con los deslizadores, el código cambia al instante.
Cómo usar
- Elige en las pestañas el tipo de animación: fundido, rebote, etc.
- Ajusta la duración, el retardo, el easing (timing) y las repeticiones mientras compruebas la vista previa.
- Con el botón «Volver a reproducir» puedes verla desde el principio cuando quieras.
- Copia el CSS de abajo y aplícalo al elemento deseado con la clase .element.
Preguntas frecuentes
- ¿Cómo uso el CSS copiado?
- Pega la definición de @keyframes en tu hoja de estilos y asigna la clase .element al elemento que quieras animar. Puedes cambiar el nombre de la clase por el que prefieras.
- ¿Cómo mantengo el estado antes de empezar y después de terminar?
- El atajo (shorthand) generado ya incluye both (animation-fill-mode: both) al final, así que antes de reproducir se mantiene el primer fotograma y al terminar, el último.
- Quiero que se reproduzca solo cuando el elemento aparece en pantalla.
- Detecta su aparición al hacer scroll con un IntersectionObserver y añade en ese momento la clase .element. El CSS que crea esta herramienta usa propiedades estándar y funciona tal cual, pero la lógica del disparador la añades tú en tu proyecto; es código de referencia.