Generador de animaciones CSS
Convierte pasos porcentaje;propiedad:valor en un bloque @keyframes y su atajo de animación.
Generador de animaciones CSS
Pega pasos keyframe como porcentaje;propiedad:valor — una línea por punto, como 0;opacity:0 seguido de 100;opacity:1 — y esta herramienta ensambla un bloque @keyframes completo más la declaración de atajo de animación correspondiente. Añade varios pares propiedad:valor a la misma línea, separados por puntos y comas, para animar más de una propiedad en ese punto, y reutiliza un porcentaje en líneas múltiples para seguir añadiendo propiedades a él.
Elige un preset — fade, slide, pulse, shake o bounce — para omitir escribir pasos manualmente y obtener una animación lista con todas las opciones aún ajustables, o cambia el preset a personalizado para controlar cada punto desde tu propia entrada. Las opciones restantes forman el atajo de animación: nombre establece el identificador compartido por la regla @keyframes y la declaración de animación, duración y retraso están en segundos, y la función de tiempo cubre cada palabra clave estándar más una curva cubic-bezier() personalizada para una forma de aceleración exacta. Configura la animación para repetirse un número fijo de veces o activa infinito, elige una dirección (normal, reverse, alternate, alternate-reverse) y un modo de relleno para lo que sucede antes y después de ejecutarse, y activa la opción de prefijo webkit para también emitir un bloque @-webkit-keyframes y una línea -webkit-animation para versiones anteriores de Safari y Android WebView.
Los valores de porcentaje fuera de 0–100 se fuerzan al rango, "from" y "to" se aceptan como alias para 0 y 100, y las líneas en blanco o mal formadas se omiten en lugar de romper la salida. El recuento bajo la salida reporta cuántos puntos keyframe se generaron y el recuento exacto de caracteres.
Todo se ejecuta localmente en tu navegador mientras escribes — ningún dato CSS o animación se envía nunca a un servidor. Copia el resultado, descárgalo como archivo .txt, o envía la salida de vuelta a la entrada para seguir refinando los pasos.