Generador de Animaciones CSS
Un generador de animaciones CSS escribe por usted la regla @keyframes y las propiedades de animación. Elija uno de los 16 preajustes, mueva los deslizadores Duración y Retardo y fije repeticiones, sentido, función de tiempo y modo de relleno: el cuadrado de vista previa se anima en directo y el código CSS se actualiza. Pulse bounce y la línea abreviada muestra animation: bounce 1s ease 0s infinite normal;
Propiedades de Animación
Código CSS
Generador de Animaciones CSS
Genere animaciones CSS instantáneamente con nuestro constructor visual. 16 presets incluidos.
Herramientas populares
Acerca de Generador de Animaciones CSS
Este generador construye una animación CSS completa desde un panel visual, así que nunca tendrá que recordar el orden de las propiedades. Incluye dieciséis preajustes — bounce, shake, pulse, fadeIn, fadeOut, slideInLeft, slideInRight, slideInUp, rotate, flip, swing, rubberBand, jello, heartBeat, flash y zoomIn — y cada botón lleva el identificador @keyframes exacto que va a escribir. Al pulsar un preajuste, ese identificador se copia también en el campo Nombre de la animación, que después puede cambiar por el que necesite su hoja de estilos.
Seis controles dan forma al resultado. Duración va de 0.1 a 5 segundos en décimas y Retardo de 0 a 3 segundos. Número de repeticiones ofrece 1, 2, 3, 5 o infinite. El sentido cubre normal, reverse, alternate y alternate-reverse; la función de tiempo cubre ease, ease-in, ease-out, ease-in-out, linear, step-start y step-end; y el modo de relleno cubre none, forwards, backwards y both. Cada opción se muestra con la propia palabra clave CSS, de modo que la lista y el código generado dicen siempre lo mismo.
Junto a la vista previa aparecen dos salidas. La línea Notación abreviada es la única propiedad animation, en el orden nombre, duración, función de tiempo, retardo, repeticiones, sentido y — cuando no es none — modo de relleno. El bloque Código CSS de debajo es la forma larga: la regla @keyframes completa más una clase .animated-element con una propiedad por línea. El botón Copiar copia la forma larga.
Lo que no hace: anima un elemento con una sola regla de keyframes, sin encadenar secuencias, sin animaciones ligadas al desplazamiento y sin transiciones CSS. Renombre .animated-element con su propio selector tras pegar, y recuerde que un visitante con la reducción de movimiento activada necesita una consulta prefers-reduced-motion que debe añadir usted.
Casos de uso
Cómo usar
Pulse uno de los 16 botones de preajuste de la parte superior. Cada botón muestra el nombre @keyframes que va a escribir y el cuadrado de vista previa se anima al instante.
Ajuste los deslizadores Duración y Retardo. La duración va de 0.1 a 5 segundos y el retardo de 0 a 3, ambos en décimas de segundo.
Elija número de repeticiones y sentido, después función de tiempo y modo de relleno. Cada opción se muestra con la palabra clave CSS que produce.
Cambie el campo Nombre de la animación si necesita un identificador que encaje en su hoja de estilos, por ejemplo loaderPulse en lugar de pulse.
Observe el cuadrado de vista previa y lea después la línea Notación abreviada para la versión de una sola propiedad, o el panel Código CSS para la regla @keyframes completa.
Pulse Copiar para llevar la forma larga al portapapeles, péguela en su hoja de estilos y sustituya .animated-element por su propio selector.
Consejos Pro
- Pulsar un preajuste sobrescribe el campo Nombre de la animación con el identificador del preajuste. Renombre la animación después de elegir el preajuste, nunca antes.
- El retardo aparece en la notación abreviada aunque sea 0s, mientras que la forma larga omite animation-delay por completo con el deslizador a cero. Las dos salidas son equivalentes, no idénticas.
- El modo de relleno none es el valor por defecto y también desaparece de la forma larga. Elija forwards si el elemento debe conservar el estado del último keyframe al terminar.
- El deslizador de duración se detiene en 5 segundos y avanza en décimas. Para algo más lento, copie el código y edite a mano el valor de animation-duration; no hay que cambiar nada más.
- Combine alternate con 2 repeticiones para un movimiento de ida y vuelta que acaba donde empezó. Con infinite y normal, el elemento salta al primer keyframe en cada vuelta.
Solución de problemas
El nombre de animación que escribí ha desaparecido.
Pulsar un botón de preajuste fija el campo Nombre de la animación con el identificador de ese preajuste, así que un nombre escrito antes se sobrescribe. Elija primero el preajuste y escriba después su nombre; la vista previa y las dos salidas lo siguen al instante.
El CSS pegado no hace nada en mi página.
La regla apunta a la clase .animated-element, que probablemente no existe en su marcado. Añada esa clase al elemento o renombre el selector en el código pegado. El bloque @keyframes de arriba debe quedarse, porque animation-name se refiere a él.
El elemento vuelve a su posición inicial cuando acaba la animación.
Es el modo de relleno none por defecto: fuera de su tiempo de ejecución el elemento usa sus estilos normales. Ponga Modo de relleno en forwards para conservar el último keyframe, o en both si además debe adoptar el primero durante el retardo.
Preguntas frecuentes
Declare una regla @keyframes con los estados que quiera y apunte a ella desde un elemento con las propiedades animation. Este generador hace las dos cosas: elija un preajuste, fije duración, retardo, repeticiones, sentido, función de tiempo y relleno, y copie el panel Código CSS, que contiene el bloque @keyframes y una clase .animated-element.
Una sola propiedad que lo reúne todo, en el orden nombre, duración, función de tiempo, retardo, repeticiones, sentido y modo de relleno. La línea Notación abreviada escribe justo eso: la página abre con animation: myAnimation 1s ease 0s infinite normal; y al pulsar un preajuste cambia el nombre. El relleno solo se añade si no es none.
Dieciséis: bounce, shake, pulse, fadeIn, fadeOut, slideInLeft, slideInRight, slideInUp, rotate, flip, swing, rubberBand, jello, heartBeat, flash y zoomIn. Cada botón lleva el identificador que aparecerá en la regla @keyframes generada, y al pulsarlo se copia ese identificador en el campo Nombre de la animación.
Decide el aspecto del elemento fuera del tiempo de ejecución de la animación. none, el valor por defecto, deja sus estilos normales. forwards conserva el último keyframe al terminar, backwards aplica el primero durante el retardo, y both hace las dos cosas.
ease empieza despacio, acelera y vuelve a frenar, por eso es el valor por defecto de CSS; linear avanza a velocidad constante de principio a fin. Cambie la lista Función de tiempo entre ambos y mire el cuadrado de vista previa: con el preajuste rotate la diferencia se ve enseguida.
Ponga Número de repeticiones en infinite, que es el valor con el que arranca este generador. La lista ofrece además 1, 2, 3 y 5. En el CSS copiado se convierte en animation-iteration-count: infinite, y en la notación abreviada es el quinto valor de la línea.
Sí. El campo Nombre de la animación alimenta a la vez el identificador @keyframes y la propiedad animation-name, así que nunca pueden discrepar. Elija antes el preajuste, porque pulsar un botón de preajuste sustituye el contenido del campo por su propio identificador.
Para movimientos simples, en la práctica sí: las animaciones de transform y opacity puede resolverlas el compositor sin recalcular el diseño y no hay script ejecutándose en cada fotograma. Todo lo que requiera lógica, secuencias encadenadas o interacción sigue siendo cosa de JavaScript.
Las propiedades usadas aquí — @keyframes, animation-name, duration, delay, iteration-count, direction, timing-function y fill-mode — son CSS sin prefijos y las admiten todos los navegadores actuales de escritorio y móvil. No se escribe ningún prefijo de fabricante ni hace falta para estos preajustes.
Envuelva la animación en una consulta de medios. Pegue el código generado y añada @media (prefers-reduced-motion: reduce) { .animated-element { animation: none; } } para que quien haya pedido menos movimiento no lo reciba. El generador no añade esa regla por usted.