Generador de Animaciones CSS
El generador de animaciones CSS crea animaciones @keyframes a partir de 14 presets, como aparición gradual, deslizamiento, rebote, pulso, giro, sacudida y zoom, con controles de duración, función de timing y número de iteraciones.
Acerca de esta herramienta
El generador de animaciones CSS crea animaciones @keyframes a partir de 14 presets, como aparición gradual, deslizamiento, rebote, pulso, giro, sacudida y zoom, con controles de duración, función de timing y número de iteraciones.
Cómo se usa
- Elige un preset de animación.
- Ajusta la duración, la función de timing y el número de iteraciones.
- Pulsa Repetir para verla en acción.
- Haz clic en Copiar CSS para obtener los @keyframes y la regla animation.
Datos útiles
- Una animación CSS tiene dos partes: una regla @keyframes y una propiedad animation en el elemento.
- Animar transform y opacity suele ser la opción más fluida en cuanto a rendimiento.
- Las funciones de timing como ease-out empiezan rápido y se desaceleran, lo que resulta natural para las entradas.
- Respeta la media query prefers-reduced-motion para los usuarios que han pedido menos movimiento.
- Un número de iteraciones infinite es ideal para loaders; los efectos de entrada suelen ejecutarse una sola vez.
Funciona por completo en tu navegador: nada de lo que introduces se sube ni se guarda.
Preguntas frecuentes
¿Cómo creo una animación CSS?
Define el movimiento en una regla @keyframes y luego aplícalo con animation: nombre duración timing iteraciones. El generador escribe ambas cosas por ti.
¿Qué diferencia hay entre transiciones y animaciones CSS?
Las transiciones animan el cambio entre dos estados cuando cambia una propiedad, por ejemplo al pasar el ratón. Las animaciones usan keyframes, pueden ejecutarse automáticamente y repetirse en bucle.
¿Cómo hago que una animación se repita para siempre?
Establece el número de iteraciones en infinite, por ejemplo animation: spin 1s linear infinite.
¿Las animaciones CSS afectan a la accesibilidad?
Los movimientos grandes o continuos pueden molestar a algunos usuarios. Envuelve las animaciones no esenciales en @media (prefers-reduced-motion: no-preference).