Duração e Temporização da Propriedade de Transição
Defina quais propriedades entram em transição, quanto tempo ela dura e quando começa, usando um atraso.
Duração e Temporização da Propriedade de Transição é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
O que é uma transição CSS
Uma transição CSS interpola entre dois valores de propriedade ao longo de uma duração especificada quando o valor muda (por exemplo, ao passar o cursor). Não é necessário usar JavaScript.
transition-property
Especifica quais propriedades CSS devem ser animadas. Use all para criar uma transição de todas as propriedades animáveis ou liste propriedades específicas.
<button>Save changes</button>transition-duration
Define quanto tempo a transição leva. Aceita valores de tempo em segundos (s) ou milissegundos (ms).
<div class="card">Card</div>A forma abreviada de transition
Combina as quatro subpropriedades de transição: property | duration | timing-function | delay.
<button class="btn">Submit</button>Várias transições
Liste várias transições separadas por vírgulas para animar propriedades diferentes de forma independente:
<div class="card">Card</div>transition-delay
Atrasa o início da transição. É útil para encadear animações ou permitir que uma transição termine antes que outra comece.
<nav>
<a class="nav-item" href="#">Home</a>
<a class="nav-item" href="#">About</a>
<a class="nav-item" href="#">Contact</a>
</nav>Transição no estado base
Sempre coloque a propriedade transition no estado base, não no estado :hover. Isso garante que a transição seja executada tanto ao passar o cursor quanto ao retirá-lo.
<button class="btn demo-active">Hover me</button>O que pode ser colocado em transição
A maioria das propriedades CSS numéricas pode ser colocada em transição: cores, dimensões, opacidade, transformações etc. Propriedades discretas (como display) não podem ser interpoladas suavemente — elas mudam instantaneamente.
Aviso sobre transition: all
Usar transition: all pode causar animações inesperadas em propriedades que você não pretende animar. No código de produção, sempre especifique propriedades explicitamente.
Transicionando cores
As transições de cor interpolam entre valores. Use o mesmo formato de cor para obter os melhores resultados:
<button class="btn demo-active">Hover me</button>Transições e recálculo excessivo de layout
Para melhorar o desempenho, evite transicionar propriedades que acionam o layout, como width, height, margin e padding. Elas causam o recálculo do layout a cada quadro da animação. Use transform e opacity em vez disso.
Verificação rápida
Onde a propriedade transition deve ser colocada para garantir que seja executada tanto ao passar o cursor quanto ao retirá-lo?
Recapitulação
As transições CSS suavizam as alterações de propriedades ao longo do tempo usando transition-property, duration, timing-function e delay. Coloque as transições no estado base para obter uma animação bidirecional. Para melhorar o desempenho e a previsibilidade, prefira listas de propriedades específicas a all.
Perguntas Frequentes
A aula “Duração e Temporização da Propriedade de Transição” é grátis?
Sim — o texto completo de “Duração e Temporização da Propriedade de Transição” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Duração e Temporização da Propriedade de Transição”?
Defina quais propriedades entram em transição, quanto tempo ela dura e quando começa, usando um atraso. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Duração e Temporização da Propriedade de Transição”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Duração e Temporização da Propriedade de Transição
- Funções de Aceleração: ease linear cubic-bezier
- Transicionando Várias Propriedades
- Desempenho: Propriedades Transformáveis vs. com Repintura