Generador de animaciones CSS
Crea animaciones CSS @keyframes a partir de predefinidos o tus propios fotogramas clave; ajusta duración, retraso, repeticiones, dirección, relleno y curva cubic-bezier.
Ajustes predefinidos
Fotogramas clave
Una regla por línea, p. ej. 50% { transform: scale(1.2); }. Edítalo libremente; la vista previa se actualiza al instante.
Tiempos
Vista previa
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.animated {
animation: bounce 1s ease 0s infinite normal both;
}
@media (prefers-reduced-motion: reduce) {
.animated {
animation: none;
}
}Herramientas Relacionadas
Ver Todas¿Qué es Generador de animaciones CSS?
Crea una animación CSS completa: la regla @keyframes, la forma abreviada animation y una anulación opcional para prefers-reduced-motion. Parte de predefinidos como aparecer, entrar deslizando, rebote, pulso, sacudida, giro o latido, edita libremente los fotogramas clave y da forma a los tiempos con una curva cubic-bezier arrastrable.
Cómo usar Generador de animaciones CSS
- Elige un ajuste predefinido o escribe tus propios Fotogramas clave (una regla por línea).
- Ajusta el Nombre de la animación, la Duración y el Retraso.
- Elige la Dirección, el Modo de relleno y Repetir siempre o un Número de repeticiones.
- Elige una Función de temporización o arrastra los controles cubic-bezier / escribe X1, Y1, X2, Y2.
- Pulsa Repetir para verla de nuevo y copia el código CSS.
Ejemplo
Pulse preset, iterations 3, direction alternate, delay 0.5s, cubic-bezier(0.68, -0.6, 0.32, 1.6), reduced-motion off
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.animated {
animation: pulse 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.5s 3 alternate both;
} Cuándo usar Generador de animaciones CSS
Úsalo para efectos de entrada, indicadores de carga, llamadas de atención y microinteracciones. Para cambios de estado sencillos (color o tamaño al pasar el ratón) basta con una transición CSS. Mantén activada la opción de movimiento reducido para que a quienes piden menos movimiento en su sistema operativo no les afecten los movimientos grandes.
Cómo funciona Generador de animaciones CSS
El texto de los fotogramas clave se envuelve en @keyframes name { … } y los ajustes se escriben en el orden estándar de la forma abreviada name duration timing-function delay iteration-count direction fill-mode. El editor Bézier limita los valores X a 0–1 (como exige CSS), mientras que Y puede sobrepasarse para suavizados con efecto rebote; cuando los cuatro valores equivalen a una palabra clave de CSS (ease, linear, ease-in, ease-out, ease-in-out), se escribe la palabra clave. El nombre se sanea para que sea un identificador CSS válido. La vista previa usa un nombre de keyframes privado para no chocar nunca con las animaciones de la propia página.
Casos de Uso Comunes
- Animaciones de entrada con aparición o deslizamiento
- Spinners infinitos e indicadores de carga que laten
- Sacudida como respuesta a una entrada de formulario no válida
- Indicadores de desplazamiento hacia abajo que rebotan
- Suavizados personalizados para un movimiento propio de la marca
Preguntas Frecuentes
¿Qué hace el modo de relleno?
forwards mantiene el último fotograma clave al terminar la animación, backwards aplica el primer fotograma clave durante el retraso, both hace ambas cosas y none ninguna.
¿Por qué los valores X de la curva Bézier se limitan a 0–1?
X representa el tiempo, que no puede ir hacia atrás, así que CSS rechaza valores fuera de 0–1. Y representa el progreso y puede sobrepasarse para crear anticipación o rebote.
¿Qué añade la opción de movimiento reducido?
Un bloque @media (prefers-reduced-motion: reduce) que fija animation: none para quienes han activado el movimiento reducido en su sistema operativo.