¿Cuál es la diferencia entre animation y transition?

Transition interpola entre dos estados por un cambio. Animation se reproduce automáticamente y soporta múltiples keyframes.

¿Las animaciones afectan el rendimiento?

Animar transform y opacity usa aceleración GPU y es eficiente. Evite animar width, height o margin.

Generador de Animaciones CSS｜Salida de código @keyframes

⚠️ JavaScript debe estar activado para usar esta herramienta.

📖 Acerca de 🔰 Cómo usar 📚 Propiedades ❓ FAQ 💡 Casos de uso

🔒

Procesamiento local

No se envían datos al servidor

📝

Sin registro

Úselo al instante sin cuenta

⚡

Vista previa en tiempo real

Todos los cambios se reflejan al instante

animation Configuración de animación

Duración0.6s

Retardo0s

Easing

Repeticiones1

infinite (bucle infinito)

Dirección

Fill Mode

CSS CODE

/* Seleccione un preset para generar CSS */

El Generador de Animaciones CSS le permite crear animaciones CSS con @keyframes a partir de presets. Incluye 12 efectos como fade-in, slide, zoom y bounce.

Ajuste duración, retardo, easing, repeticiones, dirección y fill mode con controles deslizantes intuitivos. Vista previa en tiempo real y copie el código CSS con un clic.

Todo el procesamiento se realiza en su navegador — no se envían datos al servidor. Sin registro necesario.

Elija un preset

Seleccione entre las categorías Desvanecer, Deslizar, Escalar o Rotar. Vista previa instantánea del efecto.

Ajuste los parámetros

Modifique duración, retardo, easing, repeticiones, dirección y fill mode. Los cambios se reflejan en tiempo real.

Copie el código

Copie el código CSS generado (@keyframes + animation) con el botón 📋. Péguelo directamente en su proyecto.

La propiedad abreviada animation permite especificar nombre, duración, easing, retardo, repeticiones, dirección y fill mode en una sola declaración.

Propiedad	Descripción	Predeterminado
`animation-name`	Nombre de la animación @keyframes	none
`animation-duration`	Duración de un ciclo	0s
`animation-timing-function`	Curva de aceleración	ease
`animation-delay`	Retardo antes del inicio	0s
`animation-iteration-count`	Número de ciclos	1
`animation-direction`	Dirección de reproducción	normal
`animation-fill-mode`	Retención de estilos antes/después	none

Compatibilidad

Las animaciones CSS son compatibles con todos los navegadores modernos (IE10+). No se necesitan prefijos de proveedor.

P. ¿Cuál es la diferencia entre animation y transition?: R. transition interpola entre dos estados disparados por un cambio (ej. hover). animation se reproduce automáticamente y soporta múltiples keyframes.
P. ¿Las animaciones afectan el rendimiento?: R. Animar transform y opacity usa aceleración GPU y es muy eficiente. Evite animar width, height o margin.
P. ¿Se envían datos al servidor?: R. No. Todo el procesamiento se realiza en su navegador. No se transmiten datos externamente.

📱

Animaciones de carga de página

Efectos fade-in o slide-in en secciones hero y tarjetas para una primera impresión impactante.

🔘

Atención en CTA

Animaciones pulse o bounce en botones CTA para atraer atención visual y mejorar las tasas de clic.

📊

Animaciones al scroll

Combine con Intersection Observer API para animar elementos según la posición de scroll.

🎯

Carga y retroalimentación

Spinners durante la carga de datos y mensajes animados de éxito tras enviar formularios.

CSS