Generador de animaciones CSS

Compón una animación @keyframes con una vista previa en directo sobre el elemento de muestra de abajo. Elige un nombre, define la duración, la función de temporización, el número de iteraciones, la dirección, el modo de relleno y el delay; ajusta los stops a tu gusto; copia el CSS listo para pegar con un solo clic. 100% del lado del cliente, sin subir nada.

Ajustes de animación
Stops de los keyframes
2 stops

Una declaración CSS por línea dentro de cada stop, o pega un bloque. Los stops se ordenan por porcentaje al renderizar; los duplicados se colapsan al último.

    Vista previa en directo
    Muestra

    La vista previa vuelve a ejecutar la animación cada vez que cambias los ajustes.

    Salida CSS 
    —