Generador de animaciones CSS
Crea una animación CSS en directo: 15 efectos (fundido, deslizamiento, rebote, pulso…), duración, retardo, curva, repeticiones. Código @keyframes listo para copiar.
- Gratis
- Sin registro
- Sin subir archivos
- Windows, Mac, Android, iPhone
Cargando la herramienta…
Acerca de esta herramienta
Da vida a tus interfaces sin biblioteca: 15 animaciones CSS listas (fundido, deslizamientos, zoom, rebote, pulso, sacudida, rotación, volteo…) con duración, retardo, curva de tiempo, repeticiones, dirección y modo de relleno ajustables. El código @keyframes está listo para copiar, también en una versión que respeta el movimiento reducido.
Cuándo usarla
Entrada de contenidos
Un deslizamiento hacia arriba de 0,5 s en las tarjetas de una página hace la carga más agradable.
Llamar la atención
Un pulso discreto en un botón o una sacudida en un campo incorrecto guían la mirada sin texto adicional.
Indicadores de carga
Una rotación lineal infinita crea un indicador de carga en pocas líneas.
Cómo se usa
- Elige un efecto de animación.
- Ajusta la duración, el retardo, la curva y las repeticiones.
- Copia el código @keyframes y la regla animation.
Cómo funciona
Cada efecto es una secuencia de etapas @keyframes que solo usa transform y opacity, las dos propiedades más fluidas de animar. La vista previa inserta esas etapas con su propio nombre para no chocar nunca con las animaciones del sitio.
La propiedad animation se escribe en forma abreviada: nombre, duración, curva y luego retardo, repeticiones, dirección y modo de relleno solo cuando difieren de los valores por defecto.
Consejos para un mejor resultado
- De 200 a 500 ms para animaciones de interfaz: más allá parece lento.
- ease-out va bien para las entradas, ease-in para las salidas.
- Evita animaciones infinitas en textos que hay que leer: cansan.
- Desfasa un poco el retardo de cada tarjeta para un efecto en cascada.
Problemas frecuentes y soluciones
El elemento vuelve a su sitio al final
Añade animation-fill-mode: forwards (o both) para conservar el estado final.
El elemento aparece y luego desaparece durante el retardo
Con un retardo, usa both para que el estado inicial (oculto) se aplique enseguida.
La animación no se repite
Una animación CSS se reproduce una vez por renderizado. Para reiniciarla, quita y vuelve a poner la clase con JavaScript.
Preguntas frecuentes
¿Qué es @keyframes?
Una regla CSS que describe las etapas de una animación (del 0 % al 100 %). La propiedad animation la aplica a un elemento con una duración, una curva de velocidad y un número de repeticiones.
¿Para qué sirve animation-fill-mode?
Define qué se muestra antes y después de la animación. «both» mantiene el estado inicial durante el retardo y el final después: imprescindible para los efectos de entrada.
¿Las animaciones CSS son fluidas?
Sí, sobre todo las que solo usan transform y opacity, como todos los efectos de aquí: el navegador las calcula en la tarjeta gráfica.
¿Cómo respeto a las personas sensibles al movimiento?
La pestaña «Con movimiento reducido» añade una regla prefers-reduced-motion que desactiva la animación cuando el usuario lo pidió en los ajustes de su sistema.
Búsquedas relacionadas
¿Sigues atascado?
Pregunta en el foro: la categoría, la herramienta, la ficha de tu dispositivo y el resultado de la prueba se rellenan solos.