Generador de animaciones CSS
Elige una animación lista para usar, ajusta su temporización y mírala reproducirse al instante. Edita los keyframes si quieres y luego copia CSS limpio con @keyframes y animation para tu proyecto.
Última actualización:
Usa porcentajes o from/to, p. ej., 50% { transform: scale(1.2); }
Cómo usar Generador de animaciones CSS
- Elige un ajuste predefinido como Bounce, Pulse o Slide in left. Empieza a reproducirse de inmediato.
- Ajusta la temporización: duración, retraso, easing, cuántas veces se repite, dirección y modo de relleno.
- Edita los keyframes en el cuadro de texto para personalizar el movimiento; la vista previa se actualiza mientras escribes.
- Ponle nombre a tu animación y elige el selector CSS que debe usarla.
- Pulsa Copiar CSS (o Descargar .css) y pega la regla @keyframes y la declaración animation en tu hoja de estilos.
Propiedades de animación CSS
| Propiedad | Por defecto | Qué controla |
|---|---|---|
animation-name | none | La regla @keyframes que se ejecuta. |
animation-duration | 0s | Duración de un ciclo, en s o ms. |
animation-timing-function | ease | Curva de velocidad entre keyframes: palabras clave, cubic-bezier() o steps(). También se puede definir por keyframe. |
animation-delay | 0s | Espera antes de empezar. Un retraso negativo empieza a mitad del ciclo. |
animation-iteration-count | 1 | Cuántos ciclos; se permiten decimales, o infinite. |
animation-direction | normal | reverse reproduce hacia atrás, alternate cambia de dirección en cada ciclo. |
animation-fill-mode | none | Si los estilos del primer/último keyframe se aplican antes y después de la animación. |
animation-play-state | running | Ponlo en paused para congelar la animación, p. ej., al pasar el ratón. |
Ejemplo abreviado: animation: bounce 1s ease 0.2s infinite alternate both; ejecuta los keyframes bounce durante 1 segundo con 0.2 segundos de retraso, para siempre, alternando la dirección.
Consejos para animaciones fluidas y agradables
- Limítate a transform y opacity para movimientos y fundidos; aprovechan la GPU y no provocan recálculos de diseño.
- Mantén cortas las animaciones de interfaz: de 150 a 400 ms resulta ágil en menús y botones; los efectos de entrada pueden durar de 500 a 800 ms.
- Usa el easing a propósito: ease-out para lo que entra, ease-in para lo que sale. Diseña tu propia curva con el Generador de Cubic Bezier.
- Actívalas al hacer scroll o clic añadiendo la clase con JavaScript (por ejemplo, desde un IntersectionObserver), y escucha el evento
animationendpara limpiar. - Respeta el movimiento reducido: conserva la regla
prefers-reduced-motionpara no afectar a quienes desactivan las animaciones en la configuración de su sistema. - ¿Necesitas un spinner? El Generador de loaders CSS tiene animaciones de carga listas para usar.
Preguntas frecuentes
¿Cuál es el orden de los valores en la propiedad abreviada animation?
animation: name duration timing-function delay iteration-count direction fill-mode play-state. En la práctica solo se necesitan el nombre y la duración. El primer valor de tiempo es siempre la duración y el segundo, el retraso.
¿Qué hace animation-fill-mode?
Decide qué estilos se aplican fuera del tiempo de ejecución. forwards mantiene el último keyframe al terminar la animación, backwards aplica el primer keyframe durante el retraso, both hace ambas cosas y none (el valor por defecto) muestra los estilos normales del elemento antes y después.
¿Cómo hago que una animación se repita para siempre?
Usa animation-iteration-count: infinite. Combínalo con animation-direction: alternate para reproducirla hacia delante y luego hacia atrás, lo que da un movimiento de ida y vuelta suave sin saltos.
¿Qué propiedades conviene animar?
transform y opacity. Los navegadores pueden animarlas en el compositor sin recalcular el diseño, así que se mantienen fluidas a 60 fps. Animar width, height, top, left o margin obliga a recalcular el diseño en cada fotograma y puede dar tirones.
¿Qué diferencia hay entre una transición y una animación CSS?
Una transición se ejecuta una vez entre dos estados cuando cambia una propiedad, por ejemplo en :hover. Una animación usa @keyframes con cualquier número de pasos y puede empezar por sí sola, repetirse, alternar y ejecutarse con retraso, sin ningún cambio de estado.
¿Debo respetar la configuración de movimiento reducido?
Sí. A algunas personas el movimiento les produce mareo o náuseas. Envuelve las animaciones no esenciales en @media (prefers-reduced-motion: no-preference) o desactívalas en @media (prefers-reduced-motion: reduce). Marca la opción de movimiento reducido para añadir esa regla.
¿Necesito prefijos -webkit- para los keyframes?
No. Las propiedades @keyframes y animation sin prefijo son compatibles con Chrome, Edge, Firefox y Safari desde hace muchos años, así que el CSS generado no incluye prefijos.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.