UTILS.
100% en el navegador
⤿

Generador de animaciones CSS

Crea una animación con fotogramas clave, previsualízala en vivo y copia el CSS.

Acerca de esta herramienta

Elige una animación predefinida con duración, función de temporización y número de iteraciones, mírala correr en vivo, luego copia las reglas @keyframes y animation. Todo se ejecuta en tu navegador.

Preguntas frecuentes

¿Qué controla el número de iteraciones?
Establece cuántas veces se reproduce la animación; elige infinite para repetirla siempre o un número para ejecutarla esa cantidad de veces.
¿Cómo reinicio la animación?
Pulsa Repetir — elimina y vuelve a aplicar brevemente la animación para que la vista previa se reproduzca de nuevo desde el primer fotograma clave.

Más herramientas