CSS permite criar efeitos visuais dinâmicos para tornar a experiência do usuário mais agradável e interativa.
Transições permitem que as mudanças de propriedades CSS ocorram suavemente ao longo do tempo, em vez de instantaneamente. Elas são geralmente acionadas por eventos como :hover, :focus, ou por JavaScript.
transition-property: Qual propriedade CSS será animada (ex: background-color, all).transition-duration: Duração da transição (ex: 0.5s, 500ms).transition-timing-function: Curva de velocidade da transição (ex: ease, linear, ease-in-out).transition-delay: Atraso antes do início da transição.Atalho (Shorthand): transition: [property] [duration] [timing-function] [delay];
.elemento {
transition: background-color 0.5s ease, transform 0.5s ease;
}
.elemento:hover {
background-color: var(--secundaria);
transform: scale(1.2);
}Passe o mouse sobre a caixa abaixo para ver a transição:
Animações são mais complexas que transições, permitindo criar sequências de estilos que mudam ao longo do tempo, sem a necessidade de um evento para serem acionadas (podem rodar automaticamente).
Define os estágios de uma animação. Você especifica os estilos em diferentes "quadros-chave" (keyframes) usando porcentagens (0% a 100%) ou as palavras-chave from (0%) e to (100%).
@keyframes pulse {
0% {
transform: scale(1);
background-color: var(--primaria);
}
50% {
transform: scale(1.05);
background-color: var(--secundaria);
}
100% {
transform: scale(1);
background-color: var(--primaria);
}
}animation-name: Nome da regra @keyframes a ser usada.animation-duration: Duração de um ciclo da animação.animation-timing-function: Curva de velocidade da animação.animation-delay: Atraso antes do início da animação.animation-iteration-count: Quantas vezes a animação deve ser repetida (infinite para sempre).animation-direction: Se a animação deve ser reproduzida para frente, para trás ou alternadamente (normal, reverse, alternate).animation-fill-mode: Como os estilos do elemento são aplicados antes e depois da animação (forwards, backwards, both).Atalho (Shorthand): animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode];
.elemento-animado {
animation-name: pulse;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
/* Atalho: animation: pulse 2s infinite alternate; */
}Veja a caixa abaixo animando automaticamente: