Generador de Animaciones CSS

Crea animaciones CSS sin código. Elige presets como fade, slide, bounce o spin—ajusta velocidad y easing, y copia el código @keyframes listo para usar.

Presets de Animación

Duración0.5s

Retraso0s

Easing / Curva

Repeticiones

Dirección

Estado Final

CSS Generado

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

.element {
  animation: fadeIn 0.5s ease 0s 1 normal forwards;
}

Vista Previa

✨

Tip Pro: Usa 'forwards' en fill-mode para mantener el estado final. Combina con CSS transitions para efectos de movimiento más ricos.

Generador de Animaciones CSS & Creador de Keyframes

Crea animaciones CSS sin escribir código desde cero. Elige entre 14+ presets de animación—fadeIn, fadeOut, slideIn, bounce, pulse, spin, shake, flip y más. Ajusta duración, easing (aceleración), delay y repeticiones. Previsualiza en tiempo real y exporta CSS @keyframes limpio para tu proyecto web.

1¿Cuándo usar esta herramienta?

💡Añadir animaciones de entrada/salida a elementos web

💡Crear efectos de atención para botones y CTAs

💡Construir spinners y loaders CSS

💡Prototipar micro-interacciones antes de codificar

💡Generar animaciones hover para cards e imágenes

2Características

14+ presets de animación listos para usar (fade, slide, bounce, spin...)
Vista previa en vivo—ve los cambios en tiempo real
Control total: duración, delay, easing, iteraciones, dirección
Salida limpia de @keyframes con shorthand de animation
Copia con un clic o descarga archivo .css
Funciona offline—100% procesado en cliente, sin subir datos

3Cómo usar

Selecciona un efecto de animación de la librería de presets.
Ajusta duración (velocidad), delay y curva de easing.
Mira la vista previa actualizarse al instante.
Copia el código CSS o descárgalo como archivo .css.

Preguntas Frecuentes

Q. ¿Puedo personalizar el código @keyframes?

A. ¡Claro! El CSS generado es tuyo para editar—cópialo y modifica los keyframes como necesites.

Q. ¿Funciona con React, Vue o Tailwind?

A. ¡Sí! Genera CSS estándar. Úsalo en cualquier framework, archivo CSS o librería CSS-in-JS.

Q. ¿Cuál es la diferencia entre animation y transition?

A. Las animaciones usan @keyframes para movimientos complejos de varios pasos. Las transiciones son cambios simples de un estado a otro. Esta herramienta se enfoca en animaciones keyframe.