Generador de animación CSS (keyframes)
Elige una plantilla de animación, ajusta la duración, el ritmo y la repetición, visualiza el resultado en directo y luego copia el código @keyframes completo. Procesamiento 100% local — nada se envía a un servidor.
Cómo funciona
La regla @keyframes describe el estado de un elemento en distintos porcentajes de la duración de una animación, mientras que la propiedad animation vincula esta secuencia a un elemento con una duración, un ritmo y un número de repeticiones. Elige una plantilla lista para usar (fundido, rebote, rotación...), ajusta los parámetros y obtén el código final con su regla @keyframes y su declaración animation.
¿Cómo aplico esta animación a mi propio elemento?
Copia la regla @keyframes tal cual en tu hoja de estilos, y luego reemplaza el selector .mon-element por la clase o el identificador del elemento HTML que quieras animar.
¿Qué curva de ritmo elegir?
ease-in-out encaja con la mayoría de animaciones de interfaz porque empieza y termina suavemente; linear es más adecuada para una rotación continua (como un indicador de carga), mientras que ease-out da un efecto de llegada franca, a menudo usado en apariciones de elementos.
El código se genera y se previsualiza enteramente en tu navegador, sin conexión a un servidor.