Propriedade transition
Última atualização: 2026-09-13
transition Propriedade transition
A propriedade transition é um atalho para transition-property, transition-duration, transition-timing-function e transition-delay. Ela permite mudanças suaves e animadas entre valores de propriedades quando um elemento muda de estado — por exemplo em :hover ou :focus — em vez de saltos bruscos. Ao especificar a propriedade alvo, a duração, a curva de easing e o atraso, você cria facilmente efeitos de interação fluidos. É uma ferramenta fundamental para construir micro-interações web modernas.
| Categoria | |
|---|---|
| Valor Inicial | all 0s ease 0s |
| Herdado | Não |
| Aplica-se A | todos |
| Tipo de Animação | shadow |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
transition: [ none | <single-transition> ]#;
/* <single-transition> = [ <property> | none ] || <time> || <easing-function> || <time> */⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<single-transition># | Valor | Atalho de transição: propriedade, duração, função de tempo, atraso |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transition | ✓ v26 | ✓ v12 | ✓ v16 | ✓ v6.1 | ✓ v12.1 |
| Suportado em todos os principais navegadores | |||||
Dica： Se a função de tempo for omitida, o padrão é ease; se o atraso for omitido, o padrão é 0s. Várias transições são separadas por vírgula, então cada propriedade pode ter sua própria configuração de transição.
Aviso： Nem toda propriedade pode ser transitada. Apenas propriedades com valores intermediários — como color, opacity e transform — podem animar; propriedades discretas como display não podem ser transitadas.
❓ Perguntas Frequentes
QQual é a diferença entre as propriedades CSS transition e animation?
AA transition precisa de um gatilho como :hover ou :focus para ser executada, e se move entre exatamente dois estados: o valor inicial e o final. A animation funciona com @keyframes para definir qualquer número de quadros-chave, e pode reproduzir automaticamente, em loop, ao contrário e ser pausada — é muito mais poderosa. Em resumo: use transition para mudanças de estado e animation para movimentos sequenciais complexos.
QComo aplico transições apenas a algumas propriedades CSS e não a outras?
AListe com transition-property as propriedades que você quer animar, por exemplo transition-property: background, transform;. Se você não especificá-la, o padrão é all, então toda propriedade animável participa da transição, o que pode produzir animação inesperada e custo desnecessário de desempenho. É melhor declarar as propriedades explicitamente.
QPor que minha transition CSS não funciona e como posso corrigir?
AQuatro causas comuns: a propriedade alvo em si não é animável (como display ou font-family); o valor inicial ou final está ausente, então o navegador não tem o que interpolar; a transition foi declarada dentro da pseudo-classe onde o estado muda em vez de no próprio elemento; ou a ordem do atalho está errada — a duração deve vir antes do atraso.
QMinha transition está engasgada. Quais propriedades são ruins de transicionar?
ANão faça transição de propriedades que disparam reflow e repaint, como width, height, top, left, margin e font-size. Prefira em vez disso transform e opacity, que rodam no thread do compositor e são tratadas pela GPU, permanecendo suaves a 60fps. Se necessário, adicione will-change para criar uma camada de compositor com antecedência.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
