Herramienta gratuita

Generador de
animaciones CSS

Crea animaciones CSS @keyframes con un visual picker. Fade, slide, scale, rotate, bounce y más. Configura duración, easing y delay con código listo para copiar.

.my-fade-animation {
  animation: my-fade-animation 1s ease 0s;
}

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

Consejos

• Añade "animation-fill-mode: forwards" para mantener el estado final
• Usa "animation-iteration-count: infinite" para loops
• Combina múltiples animaciones con comas en la propiedad animation

← Volver a herramientas
WhatsApp