What is the difference between CSS animation and CSS transition?

A transition animates between two states triggered by something (hover, class change, focus). An animation runs autonomously using @keyframes that define multiple steps — it can loop, have multiple stages, and run without any trigger. Use transition for hover effects and state changes; use animation for entrances, loaders, attention-getters and looping effects.

How do I make a CSS fade-in animation?

Define @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } then apply animation: fadeIn 0.4s ease forwards to the element. The fade-in preset above outputs this exact pattern with tunable duration and easing.

What is the best easing for a fade-in?

For most fade-ins use ease-out (cubic-bezier(0, 0, 0.2, 1)) — it starts fast and decelerates, which feels natural for entrances. ease-in feels sluggish for entrances; linear feels mechanical. For exits, ease-in is correct.

How do I make an animation play only once?

Set animation-iteration-count: 1 (the default) and animation-fill-mode: forwards so the element keeps its final state after the animation ends. Without forwards, the element will snap back to its original state.

Why does my CSS animation flicker?

Most commonly because you're animating layout properties (width, height, top, left) instead of compositor-only properties (transform, opacity). Switch to transform and opacity for smooth 60fps animations. Also avoid animating properties that trigger reflow on the whole page.

Can I run multiple CSS animations on one element?

Yes — comma-separate them: animation: fadeIn 0.4s ease, slideUp 0.4s ease 0.1s. Each can have its own duration, delay and easing. This is useful for compound effects like fade-in combined with slide-up.

How do I trigger a CSS animation on hover?

Apply the animation in a :hover selector rather than the base element. The animation will restart each time the user hovers. Toggle 'Trigger on hover' in the generator above to output this pattern automatically.

Generador de Animaciones CSS

Animation Preset

Duration

Length600ms

Easing

Delay

Wait0ms

Iteration

Direction

Fill Mode

Trigger on hover

Animate

Generador de Animaciones CSS — Keyframes Sin Complicaciones

Elige entre 16 presets de animación con nombre que cubren los patrones que los desarrolladores usan con más frecuencia — fade, slide, bounce, rotate, pulse, shake y más. Ajusta la duración, el retraso, la función de temporización y las iteraciones, luego copia el código @keyframes + animation listo para producción.

Anatomía de una Animación CSS

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .element { animation: fadeIn 0.5s ease forwards; /* nombre | duración | temporización | modo-relleno */ }

Funciones de Temporización

animation-timing-function: ease; animation-timing-function: ease-in-out; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); /* rebote */ animation-timing-function: steps(8, end); /* paso a paso */

Preguntas Frecuentes

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

transition anima entre dos estados en respuesta a un cambio (hover, focus, clase añadida). animation con @keyframes puede tener múltiples etapas, ejecutarse automáticamente, repetirse e ir hacia atrás.

¿Cómo pauso una animación CSS?

Usa animation-play-state: paused para pausar y animation-play-state: running para reanudar. Se puede alternar con JavaScript o con :hover.

¿Qué propiedades son seguras para animar?

transform y opacity son las más seguras — se ejecutan en el hilo compositor sin causar layout o repintado. Evita animar width, height, top, left o margin en animaciones de alto rendimiento.

¿Cómo respeto prefers-reduced-motion?

Envuelve tus animaciones en una media query: @media (prefers-reduced-motion: no-preference) { /* animaciones aquí */ }. Los usuarios con vértigo o epilepsia fotosensible agradecerán que respetes esta preferencia.