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.

CSSTools.io

Gerador de Animações CSS

Animation Preset

Duration

Length600ms

Easing

Delay

Wait0ms

Iteration

Direction

Fill Mode

Trigger on hover

Animate

Gerador de Animações CSS — Keyframes Sem Complicações

Escolha entre 16 presets de animação com nome que cobrem os padrões que os desenvolvedores usam com mais frequência — fade, slide, bounce, rotate, pulse, shake e mais. Ajuste a duração, o atraso, a função de temporização e as iterações, então copie o código @keyframes + animation pronto para produção.

Anatomia de uma Animação CSS

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.element {
  animation: fadeIn 0.5s ease forwards;
}

Perguntas Frequentes

Qual é a diferença entre transition e animation?

transition anima entre dois estados em resposta a uma mudança. animation com @keyframes pode ter múltiplos estágios, executar automaticamente e repetir.

Como pauso uma animação CSS?

Use animation-play-state: paused para pausar e animation-play-state: running para retomar.

Quais propriedades são seguras para animar?

transform e opacity são as mais seguras — executam no thread compositor sem causar layout ou repintado.

Tool last updated: May 2026