No se envían datos al servidor
Úselo al instante sin cuenta
Todos los cambios se reflejan al instante
/* Seleccione un preset para generar CSS */
El Generador de Animaciones CSS le permite crear animaciones CSS con @keyframes a partir de presets. Incluye 12 efectos como fade-in, slide, zoom y bounce.
Ajuste duración, retardo, easing, repeticiones, dirección y fill mode con controles deslizantes intuitivos. Vista previa en tiempo real y copie el código CSS con un clic.
Todo el procesamiento se realiza en su navegador — no se envían datos al servidor. Sin registro necesario.
Elija un preset
Seleccione entre las categorías Desvanecer, Deslizar, Escalar o Rotar. Vista previa instantánea del efecto.
Ajuste los parámetros
Modifique duración, retardo, easing, repeticiones, dirección y fill mode. Los cambios se reflejan en tiempo real.
Copie el código
Copie el código CSS generado (@keyframes + animation) con el botón 📋. Péguelo directamente en su proyecto.
La propiedad abreviada animation permite especificar nombre, duración, easing, retardo, repeticiones, dirección y fill mode en una sola declaración.
| Propiedad | Descripción | Predeterminado |
|---|---|---|
animation-name | Nombre de la animación @keyframes | none |
animation-duration | Duración de un ciclo | 0s |
animation-timing-function | Curva de aceleración | ease |
animation-delay | Retardo antes del inicio | 0s |
animation-iteration-count | Número de ciclos | 1 |
animation-direction | Dirección de reproducción | normal |
animation-fill-mode | Retención de estilos antes/después | none |
Compatibilidad
Las animaciones CSS son compatibles con todos los navegadores modernos (IE10+). No se necesitan prefijos de proveedor.
- P. ¿Cuál es la diferencia entre animation y transition?
- R.
transitioninterpola entre dos estados disparados por un cambio (ej. hover).animationse reproduce automáticamente y soporta múltiples keyframes. - P. ¿Las animaciones afectan el rendimiento?
- R. Animar
transformyopacityusa aceleración GPU y es muy eficiente. Evite animarwidth,heightomargin. - P. ¿Se envían datos al servidor?
- R. No. Todo el procesamiento se realiza en su navegador. No se transmiten datos externamente.
Animaciones de carga de página
Efectos fade-in o slide-in en secciones hero y tarjetas para una primera impresión impactante.
Atención en CTA
Animaciones pulse o bounce en botones CTA para atraer atención visual y mejorar las tasas de clic.
Animaciones al scroll
Combine con Intersection Observer API para animar elementos según la posición de scroll.
Carga y retroalimentación
Spinners durante la carga de datos y mensajes animados de éxito tras enviar formularios.
- Conversor de Código de Color (HEX/RGB/HSL/CMYK) y Paletas
- Generador de CSS Box-Shadow｜Multicapa y Presets
- Generador CSS Clip-Path｜Editor Visual con Presets
- Generador de Gradientes CSS｜Lineal, radial y cónico con patrones CSS
- Generador de Animación Sprite CSS｜Código steps() Automático
- Herramienta de Subconjunto de Fuentes｜Reduce Fuentes Web para Sitios Más Rápidos
- Generador de Imágenes Responsivas｜HTML srcset y picture Element Automático
- Verificador de Encabezados HTTP y Auditoría de Seguridad
- Red
- Seguridad
- Procesamiento de Imágenes y Análisis de Texto
- Corrector de Escritura Japonesa | Herramienta Gratuita de Corrección
- Corrector de Mojibake — Conversor de Codificación Gratis
- Generador de formas SVG｜Ondas y blobs SVG con código CSS
- Contador de Caracteres y Palabras | Herramienta Gratuita de Análisis de Texto
- Lector de Texto a Voz | Herramienta TTS Gratuita – Sin límite ni registro
- Redes Sociales y Entretenimiento
- Bingo Online Gratis | Voz, Tarjetas y Personalización | Sin App
- Generador de Imágenes OG｜Crea Imágenes para Redes Sociales
- Ruleta Online Gratis — Sin Descarga, Sin Instalación | Personalizable
- ¡Sin App! Contador BPM Tap Tempo | Calculadora de Delay y Metrónomo
- Generador de Equipos Aleatorios | Grupos Equilibrados con Niveles de Habilidad
- Generador de Llaves de Torneo | Crear Cuadros y Tablas de Liga