Transições: propriedade duração temporização
Adicione transition para animar suavemente alterações nas propriedades CSS, escolha durações adequadas e selecione funções de aceleração, como ease-in-out.
Transições: propriedade duração temporização é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que é uma transição CSS?
Uma transição CSS anima uma propriedade de um valor para outro quando ela muda (ao passar o cursor, ao receber foco ou ao alternar uma classe). Ela é declarativa — você informa ao CSS quais propriedades devem fazer a transição e como; o navegador cuida do restante.
Sintaxe básica
transition: property duration timing-function delay. Você pode listar várias transições separadas por vírgulas.
.btn {
background: #6366f1;
transition: background-color 0.2s ease;
}
.btn:hover {
background: #4f46e5;
}
// Browser smoothly animates the colour changeO valor da propriedade
Especifique quais propriedades devem fazer a transição. Use all para aplicar a transição a todas as propriedades animáveis — mas isso pode acionar transições indesejadas em propriedades não relacionadas. Seja explícito para obter desempenho e previsibilidade.
.card {
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
opacity 0.15s linear;
}
/* Avoid 'all' in most cases */
.risky { transition: all 0.3s; }Duração — Quanto tempo
A duração da transição em s (segundos) ou ms (milissegundos). Use durações curtas (100–200ms) para microinterações, médias (200–400ms) para alterações de estado de componentes e mais longas (400ms ou mais) para animações no nível da página.
Funções de temporização — A sensação
As funções de temporização controlam a curva de aceleração. Valores comuns: ease (padrão: início lento, meio rápido e fim lento), linear (velocidade constante), ease-in (começa devagar), ease-out (termina devagar) e ease-in-out. Curvas personalizadas: cubic-bezier(x1, y1, x2, y2).
.btn { transition: transform 0.2s ease-out; }
.toast { transition: opacity 0.3s ease-in-out; }
/* Custom cubic-bezier from cubic-bezier.com: */
.spring { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }Atraso — quando iniciar
Um atraso de transição inicia a animação depois de um tempo especificado. Utilize-o para escalonar vários elementos ou evitar ativações acidentais ao passar o mouse rapidamente.
.dropdown-menu {
opacity: 0;
transition: opacity 0.2s ease 0.1s; /* 100ms delay */
}
.dropdown:hover .dropdown-menu {
opacity: 1;
}Evento de término da transição
O JavaScript pode detectar quando uma transição termina por meio do evento transitionend. Isso é útil para remover elementos depois de um desaparecimento gradual ou iniciar a próxima etapa de uma sequência.
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && element.style.opacity === '0') {
element.remove();
}
});Transformação de elementos
A propriedade transform utiliza aceleração da GPU e é ideal para transições. Transformações comuns: translate(), scale(), rotate(), skew(). Animar transformações e opacidade ativa apenas a composição — o caminho mais rápido.
.card {
transform: translateY(0) scale(1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}O que pode receber transições?
Qualquer propriedade com um valor numérico pode receber uma transição: opacidade, cor, transformação, largura, altura, preenchimento, borda e tamanho da fonte. Propriedades como exibição e visibilidade não fazem uma transição suave — utilize opacidade para entradas e saídas graduais.
Prática: entrada gradual de uma janela modal
Uma janela modal aparece gradualmente e aumenta de tamanho a partir de uma dimensão ligeiramente menor. Aplique a classe .open com JavaScript; o CSS controla a animação.
.modal {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.modal.open {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}Desempenho: priorize transformações e opacidade
Animar propriedades que acionam o cálculo do layout (largura, altura, margem, topo e esquerda) é dispendioso — o navegador recalcula o layout a cada quadro. Priorize transform e opacity para obter animações suaves a 60 quadros por segundo.
Verificação rápida
Qual propriedade CSS deve ser priorizada em uma animação para obter o melhor desempenho?
Recapitulação: transições CSS
transição: propriedade, duração, temporização e atraso. Anime propriedades específicas, não 'todas'. Utilize ease, ease-out e ease-in-out para obter um movimento natural. Detecte o término da transição para encadear ações. Priorize transformações e opacidade para obter desempenho. Utilize alternâncias de classes no JS para acionar transições.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 41
- Aulas
- 163
Perguntas Frequentes
A aula “Transições: propriedade duração temporização” é grátis?
Sim — o texto completo de “Transições: propriedade duração temporizaçã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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Transições: propriedade duração temporização”?
Adicione transition para animar suavemente alterações nas propriedades CSS, escolha durações adequadas e selecione funções de aceleração, como ease-in-out. Você pratica Frontend 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 Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend 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 2 de 4.
Quanto tempo leva a aula “Transições: propriedade duração temporizaçã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 Frontend Academy?
Sim. Cada aula de Frontend 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
- Propriedades personalizadas CSS: declaração e atualização
- Transições: propriedade duração temporização
- Animações com @keyframes
- Respeitando prefers-reduced-motion