Generador de animaciones CSS
Crea visualmente animaciones CSS con @keyframes con plantillas, vista previa en vivo, editor cubic-bezier y salida lista para copiar en CSS, SCSS y Tailwind.
Actualizado
CSS Animation Generator
Visually build @keyframes animations with presets, live preview, and ready-to-copy CSS, SCSS & Tailwind output.
Preset & Name
Timing & Behavior
Keyframes
Live Preview
Generated Code
@keyframes my-animation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.my-animation {
animation-name: my-animation;
animation-duration: 1s;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: ease;
animation-fill-mode: none;
animation-play-state: running;
}Preguntas Frecuentes
¿Qué hace?
Crea animaciones @keyframes de forma visual. Elige un ajuste predefinido o define paradas de fotograma clave, ajusta duración/retardo/temporización/dirección, previsualiza en vivo y copia el CSS/SCSS/Tailwind.
¿cubic-bezier personalizado?
Sí. Selecciona cubic-bezier (personalizado) y aparecerá un editor visual de curvas con campos x1/y1/x2/y2. El valor resultante se aplica tanto a la vista previa en vivo como al código generado.
¿Qué precisión tiene la salida de Tailwind?
Emite un fragmento de tailwind.config.js que extiende theme.keyframes/animation para las utilidades animate-<nombre>. El CSS @keyframes en bruto se incluye como alternativa.
¿El CSS Animation Generator es gratis?
Sí, el CSS Animation Generator es 100% gratis, sin registro, sin tarifas ocultas y sin límites de uso. Todo el procesamiento se realiza localmente en tu navegador, garantizando una privacidad total.
¿Mis datos están seguros con esta herramienta?
Por supuesto. El CSS Animation Generator procesa todo en el lado del cliente, dentro de tu navegador. No se sube ni se almacena ningún dato en ningún servidor. Tu contenido permanece privado en tu dispositivo en todo momento.
¿El CSS Animation Generator funciona en dispositivos móviles?
Sí, el CSS Animation Generator es totalmente adaptable y funciona en smartphones y tablets. Puedes usarlo en cualquier dispositivo con un navegador web moderno, sin necesidad de descargar ninguna app.
¿Necesito crear una cuenta para usar esta herramienta?
No se necesita ninguna cuenta ni registro. Simplemente abre el CSS Animation Generator en tu navegador y empieza a usarlo de inmediato. No hay muros de registro ni restricciones de uso.
¿Qué lenguajes de programación o formatos admite?
El CSS Animation Generator admite una amplia gama de formatos y lenguajes populares. Consulta la interfaz de la herramienta para ver la lista completa de opciones disponibles.
¿Cómo uso el CSS Animation Generator?
Solo tienes que introducir tu entrada en el campo indicado, ajustar la configuración a tu gusto y la herramienta la procesará al instante. Después puedes copiar el resultado al portapapeles o descargarlo.
¿Qué navegadores son compatibles?
El CSS Animation Generator funciona en todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. Para una mejor experiencia, usa la última versión de tu navegador preferido.
Herramientas Relacionadas
Probador de API Online Gratis
Prueba APIs REST con solicitudes GET, POST, PUT y DELETE. Gratis, rápido y funciona por completo en tu navegador sin necesidad de registro.
Conversor de cURL a Código Gratis
Convierte comandos cURL en código JavaScript, Python o PHP. Gratis, rápido y funciona por completo en tu navegador sin necesidad de registro.
Generador de JSON Schema Gratis
Genera JSON Schema a partir de tus datos JSON automáticamente. Gratis, rápido y funciona por completo en tu navegador sin necesidad de registro.
Analizador de Cabeceras HTTP Gratis
Analiza e inspecciona las cabeceras HTTP de solicitudes y respuestas. Gratis, rápido y funciona por completo en tu navegador sin necesidad de registro.
Acerca de Generador de animaciones CSS
Generador de animaciones CSS es una herramienta gratuita que funciona en el navegador, dentro de nuestra colección de Herramientas para desarrolladores. Todo se ejecuta localmente en tu dispositivo: sin subir archivos, sin registro y con tus datos siempre privados.