Cómo usar: Generador de animaciones CSS
- Elige un preset (pasa el cursor sobre las tarjetas para previsualizarlas) o empieza desde un keyframe en blanco.
- Define la duración, el retardo, las repeticiones, el easing y el disparador (carga, hover, clic, scroll).
- Edita los keyframes en la línea de tiempo: haz clic para añadir uno, arrástralo para moverlo y luego ajusta sus propiedades con los deslizadores.
- Desplázate, reduce la velocidad o activa la piel de cebolla para afinar, y después copia el CSS, Tailwind o HTML.
Qué puedes crear
- Línea de tiempo de keyframes — añade tantos keyframes como quieras, arrástralos a nuevos porcentajes y asigna a cada uno su propio easing.
- Propiedades — translate X/Y, rotate, rotate 3D X/Y, scale, skew, opacidad, blur, resplandor (box-shadow), color de fondo y border radius. Los valores que faltan se interpolan, así que las transformaciones nunca saltan.
- Disparadores — al cargar, al pasar el ratón, al hacer clic, al entrar en pantalla con scroll o una animación controlada por scroll solo con CSS.
- Stagger — anima una lista elemento tras elemento con una única propiedad personalizada de CSS.
- Inspección — pausa, desplázate fotograma a fotograma, reduce la velocidad a ¼ y activa la piel de cebolla para ver todos los keyframes a la vez.
- Exportación — shorthand o longhand de CSS, HTML, JavaScript, Tailwind v3 y v4, un mixin de SCSS, un archivo de demo independiente o un enlace para compartir.
La shorthand de animation
| Parte | Ejemplo | Significado |
|---|---|---|
| nombre | fade-in-up | La regla @keyframes que se ejecuta |
| duración | 0.6s | Duración de un ciclo |
| función de temporización | cubic-bezier(.33,1,.68,1) | Curva de velocidad entre keyframes |
| retardo | 0.2s | Espera antes de empezar; los valores negativos empiezan a mitad |
| número de repeticiones | infinite | Cuántos ciclos |
| dirección | alternate | Se reproduce al revés en cada ciclo alterno |
| modo de relleno | both | Mantiene el primer fotograma antes y el último después de reproducirse |
Accesibilidad
Algunas personas se marean o sienten náuseas con el movimiento. Con Respetar prefers-reduced-motion activado, el CSS desactiva la animación para los visitantes que han activado «reducir movimiento» en su sistema operativo. Evita destellos de más de tres veces por segundo y mantén las animaciones en bucle sutiles, o da a los usuarios una forma de pausarlas.
Consejos de rendimiento
Anima transform y opacity en lugar de top, left, width o margin, que fuerzan un recálculo del layout en cada fotograma. Añade will-change solo a los elementos que están a punto de animarse. Ajusta tu easing con el generador de cubic-bezier, añade un spinner desde el generador de loaders CSS y combina las animaciones con sombras o degradados.
También se busca como: animaciones css, keyframes css, crear animaciones css, animate css, generador de animaciones css online, generador de código de animación, efectos css.
Herramientas que combinan con: Generador de animaciones CSS
- Generador de Keyframes CSS — Un editor visual para @keyframes.
- Generador de efectos hover CSS — Diseña animaciones hover para botones, tarjetas, enlaces e iconos.
- Calculadora de abrazaderas — Introduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de ajustar con el zoom clamp() con una explicación de los cálculos, una vista previa en directo y una escala completa y fluida de tipo o espacio.
- Convertidor PX a REM — Convierte entre píxeles, rem y em con tu propio tamaño de fuente raíz, o pega una hoja de estilos completa y convierte todos los valores px de una vez.
Preguntas frecuentes
¿El CSS generado es gratis de usar?
Sí. Cada preset se escribió para esta herramienta y el resultado es CSS puro, sin biblioteca, licencia ni atribución obligatoria.
¿Puedo editar una animación que ya tengo?
Sí. Abre Importar @keyframes existentes, pega tu CSS y se convertirá en keyframes editables. Se admiten opacidad, transformaciones (translate, rotate, rotateX/Y, scale, skew), blur, color de fondo, border radius y sombras de resplandor.
¿Cómo inicio la animación cuando el elemento entra en pantalla al hacer scroll?
Elige el disparador Al entrar en pantalla con scroll para un pequeño script de IntersectionObserver que funciona en todas partes, o Impulsada por scroll (solo CSS) para
animation-timeline: view() sin JavaScript en los navegadores que lo soporten.¿Funciona con Tailwind CSS?
Sí. Las pestañas de Tailwind dan un bloque
tailwind.config.js para v3 y un bloque @theme para v4, así puedes usar la animación como clase animate-*.¿Qué propiedades son mejores para una animación fluida?
transform y opacity se ejecutan en el compositor de la GPU y se mantienen fluidas incluso en móviles lentos. Blur, sombras, colores y border radius cuestan más, así que úsalos con moderación en elementos grandes.¿Puedo instalar Generador de animaciones CSS como aplicación web y utilizarla sin conexión?
Sí. Generador de animaciones CSS es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.