Propriedade Transition-property
Última atualização: 2026-09-13
transition-property Propriedade Transition-property
A propriedade transition-property especifica quais propriedades CSS recebem um efeito de transição quando seus valores mudam. Seu valor padrão é all, o que significa que toda propriedade animável participa da transição; você também pode listar nomes de propriedades específicas explicitamente para evitar custo de desempenho desnecessário e comportamento de animação inesperado.
| Categoria | |
|---|---|
| Valor Inicial | all |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
transition-property: none | all | <property>#;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
all | none | Palavra-chave | Todas as propriedades ou nenhuma |
<property> | Tipo | A propriedade a ser transitada |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transition-property | ✓ v26 | ✓ v12 | ✓ v16 | ✓ v6.1 | ✓ v12.1 |
| Suportado em todos os principais navegadores | |||||
Aviso： Usar all é conveniente, mas qualquer mudança em qualquer propriedade animável disparará uma transição, o que pode causar efeitos inesperados — até mudanças de font-size são animadas. Recomenda-se listar as propriedades que você realmente precisa.
❓ Perguntas Frequentes
QQuais propriedades CSS transition-property pode ter como alvo para animação?
AApenas propriedades interpoláveis podem ser transitadas — aquelas com estados numéricos intermediários, como color, opacity, transform, box-shadow, filter, width e height. Propriedades discretas como display, visibility e font-family não podem ser suavizadas e simplesmente saltam entre estados.
QQual é o sentido de definir transition-property como none?
Anone significa que nenhuma propriedade participa de nenhuma transição, o que equivale a desativar transições no elemento. É comumente usado para desligar transições temporariamente — por exemplo, impedindo que elementos entrem voando de sua posição inicial no primeiro carregamento da página. Também pode redefinir configurações de transição herdadas de um pai ou de uma folha de estilos global.
QQuais são as armadilhas de transition-property: all? Por que all não é recomendado?
Aall anima toda propriedade animável sempre que muda, o que cria dois problemas: um custo de desempenho, porque mudanças em propriedades incidentais como font-size ou line-height também são animadas; e um comportamento difícil de controlar, produzindo animações que parecem descontroladas. Listar as propriedades explicitamente é mais barato e fácil de manter — all só serve para componentes minúsculos com muito poucas propriedades animáveis.
QPor que o valor height: auto não pode ser transitado ou animado?
Aheight: auto não tem valor intermediário definido, então o navegador não consegue interpolar entre height: 0 e auto, e a animação pula abruptamente. Soluções alternativas comuns: o truque do max-height, transitar grid-template-rows de 0fr para 1fr para revelar conteúdo, ou usar scaleY() com transform-origin para uma expansão visual.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
