Generador de animaciones CSS

Cómo usar

1. Elige un preajuste de animación: selecciona entre las animaciones habituales, fundido, deslizamiento, rebote, rotación, pulsación, sacudida y más.
2. Personaliza la duración y el comportamiento: ajusta duración, retraso, función de easing, número de iteraciones y fill mode.
3. Copia el CSS: la definición @keyframes completa y la propiedad abreviada animation están listas para pegarse en tu hoja de estilo.

¿Por qué usar el generador de animaciones CSS?

Las animaciones CSS dan vida a las interfaces, atraen la atención hacia los elementos clave, dan retroalimentación visual y crean experiencias de usuario cuidadas. Escribir reglas @keyframes a mano exige conocer la sintaxis correcta, los nombres de curvas y las combinaciones de propiedades adecuadas. Este generador ofrece preajustes de animación cuidados con vista previa en directo y te permite ajustar cada parámetro, produciendo CSS listo para producción sin JavaScript ni biblioteca de animación.

Funcionalidades

• Preajustes de animación: fundido, deslizamiento, rebote, rotación, pulsación, sacudida, volteo, zoom, etc., todos con vista previa en directo.
• Editor de keyframes personalizado: construye tu propia animación desde cero con una interfaz visual.
• Control del timing: ajusta la duración (ms/s), el retraso, la curva (linear, ease, cubic-bezier) y el número de iteraciones.
• Modos de relleno: controla los comportamientos forwards, backwards, both y none.
• Sin necesidad de JavaScript: todas las animaciones generadas son CSS puro, sin biblioteca ni framework.

Preguntas frecuentes

¿Cuál es la diferencia entre animación y transición en CSS?

Las transiciones CSS se disparan con cambios de estado (hover, focus, cambio de clase) y animan entre dos estados. Las animaciones CSS usan @keyframes para definir varios estados y se ejecutan independientemente de la interacción del usuario, pueden hacer bucle, invertirse y arrancar automáticamente.

¿Qué es animation-fill-mode y por qué es importante?

animation-fill-mode controla si el elemento conserva los estilos de la animación antes de que comience (backwards), después de terminar (forwards), o ambos. Sin forwards, el elemento vuelve bruscamente a su estilo original al final de la animación.

¿Las animaciones CSS son eficientes?

Las animaciones que solo usan transform y opacity se aceleran por GPU y son muy fluidas. Evita animar propiedades de diseño como width, height, margin o top/left, provocan recálculos de layout y pueden generar tirones. Mantente con transform y opacity para obtener 60 f/s.

Lo que las animaciones CSS realmente hacen

Las animaciones CSS interpolan una o más propiedades CSS entre fotogramas clave definidos a lo largo del tiempo, produciendo movimiento o cambio visible sin JavaScript. El modelo tiene dos piezas: las reglas @keyframes definen cómo se ve una animación en pasos basados en porcentajes (0% a 100%), y la propiedad abreviada animation (o sus primas longhand animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-fill-mode) le dice al navegador cómo reproducir esa definición de fotogramas clave. El navegador maneja toda la interpolación, suavizado y temporización de fotogramas en C++, normalmente acelerado por GPU para los cambios de transform y opacity.

Las animaciones difieren de las transiciones CSS de dos maneras. Las transiciones se disparan cuando cambia el estado de un elemento (un hover, una clase alternada, un evento de focus) e interpolan entre exactamente dos valores: el antiguo y el nuevo. Las animaciones se ejecutan independientemente del estado, siguen un número arbitrario de pasos de fotogramas clave, pueden hacer bucles indefinidamente, pueden reproducirse en reversa, y pueden activarse, pausarse y reanudarse a través de CSS o JavaScript. Las transiciones son la herramienta correcta para «saltar de A a B en medio segundo»; las animaciones son la herramienta correcta para «hacer bucle a este pulso de atención para siempre» o «reproducir esta secuencia de entrada una vez cuando aparezca el elemento».

Para el diseño web moderno, las animaciones CSS reemplazan una enorme cantidad de lo que antes requería bibliotecas JavaScript. Los giradores, fades, slides hacia arriba, pulsos de atención, marcas de éxito: todos son ahora patrones CSS estándar. La compensación es la expresividad para secuencias complejas. Las animaciones CSS pueden hacer mucho pero dejan de ser convenientes alrededor de 5 a 7 pasos de fotogramas clave con cambios de propiedades sincronizados; para animaciones storyboard, secuencias vinculadas al scroll, o cualquier cosa dinámica que dependa del estado de JavaScript, las bibliotecas dedicadas (GSAP, Framer Motion, Web Animations API) siguen siendo la mejor opción.

Cómo funciona esta herramienta tras bambalinas

Cuando eliges un preset (por ejemplo, «bounce» o «fade-in») la herramienta carga una cadena @keyframes predefinida en el área de vista previa y aplica la propiedad de animación a la caja de vista previa. Los fotogramas clave son CSS real, no un formato personalizado: lo que ves es lo que obtienes para copiar. Los deslizadores actualizan los valores de tiempo de animación (duración, retraso, conteo de iteraciones) editando la propiedad animation en línea en tiempo real, así que la vista previa refleja cada cambio instantáneamente sin recargar la página.

La selección de función de suavizado usa los valores estándar de timing-function de CSS: linear (velocidad constante), ease (predeterminado, inicio y fin lentos), ease-in (inicio lento), ease-out (fin lento), ease-in-out (inicio y fin lentos), o cubic-bezier(x1, y1, x2, y2) para curvas personalizadas. La curva de animación visible es calculada por la implementación nativa de timing-function del navegador; la vista previa es la salida realmente renderizada por el navegador, no una simulación JavaScript.

La caja de código muestra el CSS completo que necesitas para soltar en una hoja de estilos: tanto el bloque @keyframes como la declaración .tu-clase { animation: ... }. Haz clic en «Copiar CSS» y ambos se escriben en tu portapapeles como un único bloque de texto. No se genera ningún archivo, ningún servidor procesa nada, y la herramienta no tiene backend al que llamar. La vista previa, la generación de código y la escritura en el portapapeles ocurren todo en JavaScript en tu dispositivo. Refresca la página y tu configuración personalizada se ha ido a menos que la hayas copiado primero.

Breve historia de la animación web

• Flash domina el movimiento web, 1996 a 2010.Adobe Flash (originalmente Macromedia) es la herramienta principal para la animación web a lo largo de principios de los 2000. Basado en vectores, impulsado por línea de tiempo, con un runtime de plugin personalizado. Para 2010, Flash impulsa la mayoría de los anuncios de banner, el reproductor de video de YouTube y los juegos de la era Newgrounds. Luego los dispositivos móviles lo matan: el iPhone nunca soportó Flash, Android abandona el soporte en 2012, los navegadores deprecian el plugin para 2020.
• Transiciones CSS en WebKit, 2007.El motor WebKit de Apple envía -webkit-transition en 2007, la primera primitiva de animación CSS comúnmente desplegada. Utilizada mucho en las primeras aplicaciones web del iPhone. Para 2009 la propiedad está en el proceso de especificación CSS y se envía sin prefijo entre los navegadores para 2014.
• Módulo CSS Animations Nivel 1, 2009.WebKit añade -webkit-animation y @-webkit-keyframes en marzo de 2009 antes del borrador del W3C CSS Animations Module Nivel 1 (también 2009). Firefox sigue en la versión 5 (2011), IE en la versión 10 (2012). Comienza la era «no se necesita JavaScript para animaciones básicas».
• GSAP y bibliotecas de animación JS, desde 2008.El método .animate() de jQuery (2006) inicia la era de bibliotecas de animación JS; GreenSock Animation Platform (GSAP, lanzado en 2008) se convierte en el estándar de oro para la animación secuenciada compleja, scrubbing de línea de tiempo y rendimiento. Utilizado en Disney, Coca-Cola y sitios de marketing nivel Awwwards. Continúa coexistiendo con las animaciones CSS: GSAP para complejidad secuenciada, CSS para simplicidad declarativa.
• Web Animations API estandarizada, 2014 a 2018.La especificación W3C Web Animations proporciona una API de JavaScript que expone las animaciones CSS y añade control programático: element.animate(keyframes, options). Chrome envía en la versión 36 (2014), Firefox en la versión 75 (2020), Safari en la versión 13.1 (2020). Cierra la brecha entre CSS declarativo y JavaScript con poder total de biblioteca.
• Las animaciones impulsadas por scroll aterrizan, 2023 a 2024.El módulo CSS Scroll-driven Animations introduce animation-timeline, permitiendo a las animaciones CSS vincularse a la posición de scroll en lugar de (o además de) el tiempo. Chrome 115 (julio de 2023) envía primero; Safari y Firefox añaden soporte a través de 2024 y 2025. Desbloquea efectos de parallax, indicadores de progreso de scroll y animaciones de revelación de sección en CSS puro.

Flujos del mundo real

• Spinners de carga y estados de esqueleto.Un cargador giratorio (animation: spin 1s linear infinite con un fotograma clave de rotación de 360 grados) es el uso de animación CSS más común. Las pantallas de esqueleto con un efecto de brillo deslizante usan una animación translateX o background-position. Ambos son esenciales para el rendimiento percibido: mientras el contenido carga, la animación le dice a los usuarios «estamos trabajando en ello» en lugar de «está roto».
• Micro-interacciones de hover y focus.Botones que pulsan sutilmente al pasar el ratón, tarjetas que se levantan al enfocar, iconos que vibran al hacer clic: estas micro-interacciones añaden personalidad sin intrusividad. Usa animaciones con animation-iteration-count: 1 y animation-fill-mode: forwards para comportamiento «reproducir una vez y quedarse», o transiciones para patrones «saltar al estado de hover».
• CTAs que llaman la atención.Un botón de llamada a la acción principal con un pulso lento y continuo o animación de respiración-resplandor llama la vista sin ser agresivo. Combina transform: scale(1) to scale(1.05) con animation-iteration-count: infinite y una duración de 3 a 4 segundos para un ritmo respiratorio calmado. Evita pulsos más rápidos; se sienten maníacos y molestan a los usuarios rápidamente.
• Entrada de página y revelación de sección.Las animaciones fade-in y slide-up al cargar la página o al hacer scroll en vista crean llegadas pulidas. CSS maneja el caso simple (animaciones que se ejecutan una vez al cargar); para entradas activadas por scroll, IntersectionObserver en JavaScript añade una clase que activa la animación cuando un elemento entra en el viewport. Las animaciones modernas impulsadas por scroll están empezando a reemplazar este patrón en CSS puro.
• Retroalimentación de éxito y sacudidas de error.La retroalimentación de envío de formulario usa pistas de animación: un guardado exitoso muestra una marca verde con una breve animación de bounce-in, mientras que un error sacude brevemente el formulario (fotogramas clave translateX alternando -10px y +10px durante 0,4 segundos). Estos pequeños toques hacen que las interacciones se sientan responsivas e intencionales.
• Hero de marketing y secuencias narrativas.Las páginas de aterrizaje y secciones hero a menudo usan animaciones de entrada escalonadas (el logo se desvanece, el titular se desliza hacia arriba, el botón CTA pulsa) para enfocar la atención a través de una secuencia diseñada. Los retrasos de animación (animation-delay: 0s, 0.3s, 0.6s) en tres elementos hermanos crean un efecto escalonado sin necesitar orquestación JavaScript.

Trampas comunes y lo que significan

• Animar propiedades de diseño mata el rendimiento.Propiedades como width, height, margin, padding, top, left, right, bottom y font-size activan el recálculo del diseño en cada fotograma de animación, a menudo causando jank o rendimiento por debajo de 60fps. Usa transform: translateX() en lugar de left, transform: scale() en lugar de width/height, y opacity en lugar de visibility. Transform y opacity son compuestos por GPU y no activan el diseño.
• Ignorar prefers-reduced-motion daña la accesibilidad.Algunos usuarios experimentan mareo o trastornos vestibulares desencadenados por animaciones web. La media query prefers-reduced-motion: reduce permite a los usuarios optar por no participar a nivel de SO. Envuelve tus animaciones decorativas en @media (prefers-reduced-motion: no-preference) { ... } o establece animation-duration: 0.01ms para usuarios que solicitan movimiento reducido. Las animaciones esenciales (spinners de carga) pueden quedarse, pero las decorativas deberían respetar la preferencia.
• El uso excesivo de will-change daña la memoria.La propiedad will-change sugiere al navegador promover un elemento a GPU con anticipación, lo que puede suavizar las animaciones. Pero agregar will-change a muchos elementos consume memoria GPU significativa. Aplícalo solo a los elementos que realmente animas, idealmente añadido vía JavaScript justo antes de que comience la animación y eliminado después. Establecer will-change: transform en cada elemento de la página es un antipatrón.
• Confusión con animation-fill-mode.Por defecto, un elemento vuelve a su estilo original después de que termina una animación. Para mantener el estado final de la animación, usa animation-fill-mode: forwards. Para iniciar el elemento en el primer estado de la animación antes de que pase el retraso, usa backwards. Para hacer ambos, usa both. Muchos errores «¿por qué mi elemento vuelve atrás?» vienen de no usar esta propiedad. El valor predeterminado es none, que rara vez es lo que quieres para animaciones de entrada de un solo disparo.
• Las animaciones infinitas agotan la batería móvil.Una animación animation-iteration-count: infinite se ejecuta para siempre, manteniendo la GPU activa y la frecuencia de actualización de pantalla en su máximo. En dispositivos móviles, esto agota la batería notablemente. Para animaciones continuas decorativas (un logo que respira suavemente), considera pausar la animación cuando la página está oculta (document.visibilityState !== 'visible'), o limitar el conteo de iteraciones a un número finito como 3 a 5 en lugar de infinito.
• Conflictos de nombres de fotogramas clave a escala.Los nombres de regla @keyframes son globales dentro de una hoja de estilos: @keyframes fade en un archivo colisiona con @keyframes fade en otro. Para bases de código grandes, da espacio de nombres a tus nombres de fotograma clave (@keyframes app-fade-in, @keyframes hero-slide-up) para evitar sobreescrituras silenciosas. Los módulos CSS y las bibliotecas CSS-en-JS manejan esto automáticamente con hashing de alcance.

Privacidad: todo se ejecuta en tu navegador

Las herramientas generadoras de CSS vienen en dos sabores: páginas HTML simples ejecutando JavaScript del lado del cliente (privadas, rápidas) y editores en la nube que guardan tus proyectos (colaborativos pero con compensaciones de privacidad). Esta herramienta es del primer tipo. Tus valores de deslizador, tu preset seleccionado, tu CSS generado: todo permanece en tu sesión del navegador. Refresca la página y el estado se va a menos que hayas copiado el CSS primero. Ningún servidor almacena tus elecciones de animación, ningún análisis rastrea qué presets has probado, y no se necesita cuenta.

La propiedad de privacidad importa principalmente para el trabajo de diseño propietario. Un estudio prototipando animaciones para un proyecto cliente confidencial, un desarrollador trabajando en las micro-interacciones de una aplicación no anunciada, o un diseñador iterando en una campaña de marca: cualquier contexto donde el historial de iteración o el diseño en progreso podría filtrar información sobre el trabajo. Con esta herramienta, no hay nada capturado porque no se envía nada. Abre la pestaña de Red del navegador y verás cero solicitudes salientes durante el uso; solo la carga inicial de la página obtiene el HTML y JavaScript.

Cuándo otra herramienta es la opción correcta

• GSAP para animaciones secuenciadas complejas.GreenSock Animation Platform (GSAP) maneja animaciones sincronizadas, secuenciadas y scrubeable mucho mejor que CSS puro. Para animaciones de marketing storyboard, secuencias vinculadas al scroll con capacidad de reversa, o cualquier cosa que dependa de cambios de estado JavaScript, GSAP es el estándar de la industria. Gratis para la mayoría de los casos de uso (con una licencia de club para algunos plugins).
• Lottie para animaciones creadas por diseñadores.Lottie (originalmente de Airbnb) renderiza animaciones de After Effects como JSON, permitiendo a los diseñadores crear movimiento complejo en After Effects y exportar directamente a web/iOS/Android. Para animaciones que exceden lo que los fotogramas clave codificados a mano pueden producir prácticamente (animaciones de personajes, morphing complejo, secuencias de ilustración), el pipeline de diseño a código de Lottie gana sobre la animación CSS manual.
• Web Animations API para control JavaScript.Si necesitas iniciar, pausar, revertir o modificar animaciones desde JavaScript en tiempo de ejecución, la Web Animations API (element.animate(keyframes, options)) es más ergonómica que lidiar con clases CSS. Devuelve un objeto Animation con métodos como .pause(), .play(), .reverse(), y una Promise .finished. Soporte nativo del navegador, no se necesita biblioteca.
• requestAnimationFrame para bucles de juego.Para animaciones impulsadas por lógica JavaScript continua (bucles de juego, simulaciones físicas, visualizaciones de datos en tiempo real), requestAnimationFrame con actualizaciones manuales de propiedades por fotograma es el enfoque correcto. Las animaciones CSS son declarativas y predefinidas; rAF te da control por fotograma sobre qué actualizar. Usa Canvas o WebGL cuando también necesites control a nivel de píxel.

Más preguntas frecuentes

¿Cómo hago que una animación se reproduzca solo una vez?

Establece animation-iteration-count: 1 (que es el valor predeterminado si no se especifica). Para hacer que el elemento se mantenga en el estado final de la animación después de que se complete (en lugar de volver al estilo original), también establece animation-fill-mode: forwards. La abreviatura combinada es animation: fadeIn 0.5s ease-out forwards;.

¿Puedo pausar y reanudar una animación?

Sí, con animation-play-state: paused (o running). Alterna esta propiedad vía JavaScript (por ejemplo, en un clic de botón) o en CSS vía :hover para patrones «pausa al pasar el ratón». La animación se congela en su punto actual y se reanuda desde ahí cuando se vuelve a running, sin pérdida de progreso. Esto funciona igual en transiciones pero solo la propiedad animation-play-state existe para control de pausa en tiempo de ejecución.

¿Cómo activo una animación en clic o scroll?

Para activadores de clic, alterna una clase CSS vía JavaScript: element.classList.toggle('animate-in'). La animación se ejecuta cuando se añade la clase. Para activadores de scroll, usa IntersectionObserver para detectar cuándo el elemento entra en el viewport y añade la clase entonces. Para navegadores modernos, las animaciones CSS impulsadas por scroll te permiten vincular el progreso de la animación directamente a la posición de scroll sin JavaScript vía animation-timeline: scroll().

¿Por qué mi animación parpadea o tartamudea?

La mayoría de problemas de parpadeo/tartamudeo vienen de animar propiedades que activan el diseño (width, height, top/left) en lugar de equivalentes basados en transform. Cambia de left: 0 a transform: translateX(0) y la animación debería suavizarse. Otras causas: sobredibujo por muchas capas semi-transparentes, thrashing de diseño por JavaScript leyendo y escribiendo estilos en el mismo fotograma, o sombras y filtros excesivos en el elemento animado.

¿Debería usar animaciones en interfaces críticas para la accesibilidad?

Úsalas, pero respeta prefers-reduced-motion. Las directrices WCAG 2.1 recomiendan proporcionar la opción de desactivar el movimiento no esencial. Envuelve las animaciones decorativas en @media (prefers-reduced-motion: no-preference) para que los usuarios que establecen la preferencia del SO obtengan una experiencia estática. Las animaciones de retroalimentación esenciales (indicadores de carga, sacudidas de error) pueden mantenerse; las puramente decorativas deberían ser opt-in para usuarios sensibles.

¿Puedo usar cubic-bezier para curvas de suavizado personalizadas?

Sí. La función de tiempo cubic-bezier(x1, y1, x2, y2) te permite definir cualquier curva de suavizado con dos puntos de control. Cada valor x está entre 0 y 1 (representando tiempo), los valores y pueden ser negativos o mayores que 1 (permitiendo efectos de overshoot y rebote). Usa nuestra herramienta Cubic Bezier o el clásico cubic-bezier.com de Lea Verou para elegir una curva visualmente. Alternativas comunes de preset: ease, ease-in, ease-out, ease-in-out, y la variable CSS con alias lineal cubic-bezier(0.25, 0.1, 0.25, 1) (ease predeterminado).