Docs executáveis de CSS: Transition CSS

Q: Qual é a ordem dos valores no shorthand transition?

transition: property duration timing-function delay;, por exemplo transition: opacity 0.3s ease-in 0.1s;. A única regra rígida é que o primeiro valor de tempo é a duração e o segundo é o delay. Separe várias transitions com vírgulas.

Q: Por que minha transition CSS não funciona?

Causas comuns: a transition está só na regra :hover (então anima na entrada e volta de uma vez), a propriedade não pode ser animada (display, ou height até auto), a duração não tem unidade (0.3 em vez de 0.3s) ou o valor muda no mesmo instante em que o elemento é acrescentado à página.

Q: Dá para animar height: auto com transition?

Não com uma transition simples de height em todos os navegadores: interpolar até auto precisa da propriedade mais nova interpolate-size, que ainda não é suportada em todo lugar. As soluções comuns são animar grid-template-rows de 0fr a 1fr em um invólucro grid, ou animar max-height até um valor maior que o conteúdo.

Uma transition em um exemplo

Uma transition diz ao navegador: quando esta propriedade mudar, anime a mudança durante este tempo em vez de trocar de uma vez. Coloque-a na regra normal do elemento, não só no :hover:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .btn {
      padding: 12px 20px;
      border: 0;
      border-radius: 8px;
      font: inherit;
      color: white;
      background-color: #2563eb;
      transition: background-color 0.4s ease, transform 0.4s ease;
    }
    .btn:hover, .btn:focus-visible {
      background-color: #16a34a;
      transform: translateY(-4px);
    }
    .instant { transition: none; }
  </style>
</head>
<body>
  <button class="btn">Hover me: 0.4s transition</button>
  <button class="btn instant">No transition</button>
</body>
</html>

Passe o mouse sobre o primeiro botão: a cor passa para verde e ele sobe 4px em 0,4 segundo, e tirar o ponteiro toca a mesma transition de volta. O segundo botão tem transition: none e troca na hora. Quem usa teclado recebe o mesmo efeito pelo :focus-visible.

O shorthand transition

transition: background-color 0.3s ease-in-out 0.1s;
/*          property         duration timing    delay */

Propriedade longa	O que define	Padrão
`transition-property`	quais propriedades são animadas (`all` ou uma lista)	`all`
`transition-duration`	quanto tempo, em `s` ou `ms`	`0s`
`transition-timing-function`	a curva de velocidade	`ease`
`transition-delay`	espera antes de começar (pode ser negativa)	`0s`

A duração padrão é 0s, e é por isso que nada anima até você definir uma. No shorthand, o primeiro tempo é sempre a duração e o segundo é o delay. Para configurações diferentes por propriedade, separe-as com vírgulas:

.card {
  transition: transform 0.2s ease-out, box-shadow 0.4s ease-out;
}

Funções de tempo lado a lado

A função de tempo decide como a velocidade muda durante a transition. Aperte Play e as sete barras percorrem a mesma distância nos mesmos 1,5 segundo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timing functions</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .lane { position: relative; height: 26px; margin: 4px 0; background: #f3f4f6; }
    .dot { position: absolute; top: 3px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #2563eb; transition: left 1.5s; }
    .lane span { position: absolute; inset-inline-start: 30px; top: 5px; color: #111827; }
    .go .dot { left: calc(100% - 20px); }
    button { margin-bottom: 6px; }
  </style>
</head>
<body>
  <button id="play">Play</button>
  <div id="lanes"></div>
  <script>
    const fns = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(0.3, 1.6, 0.6, 1)', 'steps(5)'];
    const lanes = document.getElementById('lanes');
    fns.forEach((fn) => {
      lanes.insertAdjacentHTML('beforeend', '<div class="lane"><div class="dot" style="transition-timing-function: ' + fn + '"></div><span>' + fn + '</span></div>');
    });
    document.getElementById('play').addEventListener('click', () => lanes.classList.toggle('go'));
  </script>
</body>
</html>

Função de tempo	Sensação
`linear`	velocidade constante, mecânica
`ease` (padrão)	começo rápido, parada suave
`ease-in`	começo lento, fim rápido: bom para coisas que saem
`ease-out`	começo rápido, fim lento: bom para coisas que chegam
`ease-in-out`	lento nas duas pontas
`cubic-bezier(x1, y1, x2, y2)`	a sua própria curva; um y acima de 1 passa do ponto e volta
`steps(n)`	pula em n etapas iguais, sem quadros intermediários

Para efeitos de hover e menus, ease-out com uma duração entre 150ms e 300ms dá uma sensação de resposta rápida.

O que pode ser animado

Propriedades com valores intermediários podem ser animadas: cores, comprimentos (width, padding, margin), opacity, transform, box-shadow, border-radius, filter, background-color. Propriedades que pulam entre palavras-chave, como display ou font-family, trocam de uma vez.

height: auto é o caso em que as pessoas mais esbarram: um painel que abre de height: 0 para height: auto não anima por padrão, porque o navegador não calcula os valores entre 0 e "auto". Uma solução confiável é um invólucro grid cuja única linha vai de 0fr a 1fr:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transition to auto height</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      display: grid;
      grid-template-rows: 0fr;              /* closed: the row has no height */
      transition: grid-template-rows 0.35s ease-out;
    }
    .panel.open { grid-template-rows: 1fr; } /* open: the row fits its content */
    .inner { overflow: hidden; }
    .inner p { margin: 0; padding: 12px; background: #e5e7eb; }
  </style>
</head>
<body>
  <button id="toggle" aria-expanded="false" aria-controls="panel">Show details</button>
  <div class="panel" id="panel">
    <div class="inner"><p>This content can be any height. The panel animates to fit it exactly, with no fixed max-height.</p></div>
  </div>
  <script>
    const btn = document.getElementById('toggle');
    const panel = document.getElementById('panel');
    btn.addEventListener('click', () => {
      const open = panel.classList.toggle('open');
      btn.setAttribute('aria-expanded', open);
    });
  </script>
</body>
</html>

O aria-expanded informa a quem usa leitor de tela se o painel está aberto, o que a animação sozinha não faz.

Rodar código quando uma transition termina

O evento transitionend dispara quando uma transition termina, uma vez por propriedade. Use-o para fazer algo depois do movimento, como mover o foco ou remover um elemento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transitionend</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .note { padding: 12px; background: #16a34a; color: white; transition: opacity 0.5s ease; }
    .note.hide { opacity: 0; }
  </style>
</head>
<body>
  <div class="note" id="note">Saved. <button id="close">Dismiss</button></div>
  <p id="out"></p>
  <script>
    const note = document.getElementById('note');
    document.getElementById('close').addEventListener('click', () => note.classList.add('hide'));
    note.addEventListener('transitionend', (e) => {
      document.getElementById('out').textContent = 'transitionend: ' + e.propertyName + ' after ' + e.elapsedTime + 's';
      note.remove();
    });
  </script>
</body>
</html>

Respeite o movimento reduzido

Algumas pessoas ativam "reduzir movimento" nas configurações do sistema porque o movimento na tela as deixa tontas ou as distrai. Mantenha os fades de cor e opacidade e tire os movimentos grandes com uma media query:

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color 0.2s ease; } /* no movement, only the color */
}

Mantenha as transitions suaves

transform e opacity são as propriedades mais baratas de animar: o navegador consegue mover e esmaecer um elemento sem recalcular o layout. Animar width, height, top ou margin faz o navegador montar a página de novo a cada quadro, o que pode travar em celulares lentos. Para mover algo, prefira transform: translate() a left ou margin. A página do transform trata das funções.

Erros comuns

transition só na regra :hover. O efeito anima na entrada, mas volta de uma vez quando o hover termina. Coloque a transition na regra base.
Uma duração sem unidade. transition: opacity 300 é inválido. Escreva 300ms ou 0.3s.
transition: all. Anima toda propriedade que muda, inclusive as que você não queria animar, e pode deixar mudanças de layout lentas. Liste as propriedades.
Esperar que display: none faça fade. O display troca de uma vez. Faça o fade da opacity (e defina visibility: hidden quando o fade terminar).
Animar até height: auto. Ele pula. Use a técnica do grid-template-rows acima.
Durações longas em interações pequenas. Qualquer coisa acima de uns 400ms em um botão ou menu parece lenta.

Perguntas frequentes

Como funcionam as transitions no CSS?

Você declara no elemento quais propriedades devem ser animadas e por quanto tempo, por exemplo transition: background-color 0.3s ease;. Quando o valor dessa propriedade muda (por :hover, por uma classe ou por JavaScript), o navegador anima do valor antigo até o novo em vez de trocar de uma vez.

Qual é a ordem dos valores no shorthand transition?

transition: property duration timing-function delay;, por exemplo transition: opacity 0.3s ease-in 0.1s;. A única regra rígida é que o primeiro valor de tempo é a duração e o segundo é o delay. Separe várias transitions com vírgulas.

Por que minha transition CSS não funciona?

Causas comuns: a transition está só na regra :hover (então anima na entrada e volta de uma vez), a propriedade não pode ser animada (display, ou height até auto), a duração não tem unidade (0.3 em vez de 0.3s) ou o valor muda no mesmo instante em que o elemento é acrescentado à página.

Dá para animar height: auto com transition?

Não com uma transition simples de height em todos os navegadores: interpolar até auto precisa da propriedade mais nova interpolate-size, que ainda não é suportada em todo lugar. As soluções comuns são animar grid-template-rows de 0fr a 1fr em um invólucro grid, ou animar max-height até um valor maior que o conteúdo.

Qual a diferença entre transition e animation no CSS?

Uma transition roda uma vez, entre dois valores, quando uma propriedade muda. Uma animation usa @keyframes, pode ter muitas etapas, começa sozinha quando a página carrega e pode se repetir ou rodar em loop.

Conceitos relacionados