Este generador de animaciones CSS crea reglas @keyframes listas para usar: entradas con fundido, deslizamientos, zoom, rebote, giro y más. Ajusta la duración, la curva y las repeticiones, previsualiza y copia el código. Funciona en tu navegador, sin registro y en español.
Cómo crear una animación con @keyframes
- Elige un efecto de la lista.
- Ajusta duración, curva y repeticiones, y ponle un nombre.
- Pulsa Reproducir para verlo y copia el CSS.
Cómo funciona @keyframes
Una animación CSS tiene dos partes: la regla @keyframes nombre { ... }, que define los pasos (de 0% a 100%), y la propiedad animation aplicada al elemento, que indica nombre, duración, curva y repeticiones. A diferencia de transition, permite secuencias y bucles. Ajusta la curva con nuestro generador cubic-bezier o crea efectos de un solo paso con el generador de transiciones.
Preguntas frecuentes
¿Cómo hago que la animación no se repita?
Pon la repetición en «Una vez». Para un bucle continuo, elige «Infinita».
¿Puedo cambiar el nombre de la animación?
Sí. El nombre solo tiene que coincidir entre la regla @keyframes y la propiedad animation.
¿La animación se queda en el estado final?
Si quieres que mantenga el último fotograma, añade forwards al final de la propiedad animation.
¿Te ha sido útil este contenido? Puedes invitarme a un café para ayudar a mantener el proyecto.
Invítame a un café
