Transitions e keyframes em CSS, com 20 exemplos para copiar
Playground de transitions CSS
Transitions e keyframes em CSS: 20 exemplos ao vivo | We.Inc
Ajuste duração, delay e easing com sliders, veja a curva cubic-bezier desenhada, compare transitions com @keyframes e copie 20 microinterações de hover que respeitam o movimento reduzido.
Uma transition CSS anima uma propriedade de forma suave quando o valor dela muda, por exemplo no hover: transition: transform 200ms ease-out. Ela precisa de um estado inicial e um final e roda uma vez a cada mudança. Animações com @keyframes definem os próprios passos, podem repetir e começam sem nenhuma mudança de estado. Anime transform e opacity para ter o resultado mais suave.
transition, parte por parte
Parte
Exemplo
Padrão
transform, opacity
ease-out ou cubic-bezier(.2,.8,.2,1)
O playground anima um elemento real entre dois estados com a propriedade, a duração, o delay e o easing que você escolher, e desenha o easing como uma curva para você ver por que o ease-out parece ágil e o ease-in parece arrastado. Mais abaixo há vinte efeitos de hover e foco que você pode editar ao vivo e colar em qualquer site.
Escolha qual propriedade animar: movimento, escala, rotação, cor ou opacidade.
Defina a duração e o delay com os sliders e escolha um preset de easing ou arraste os quatro números da bezier.
Aperte Play para alternar entre os dois estados e veja o resultado ao lado da curva.
Copie a linha de transition e depois pegue qualquer uma das vinte microinterações abaixo.
O feedback da interface parece instantâneo entre uns 100 e 300 milissegundos. Mais de meio segundo já começa a parecer lento para um hover.
Use ease-out para coisas que entram ou reagem ao ponteiro, ease-in para coisas que saem e ease-in-out para coisas que se movem de um lugar para outro.
Liste as propriedades que você anima em vez de escrever transition: all, para que uma mudança sem relação nunca seja animada de surpresa.
Envolva o movimento em uma verificação de prefers-reduced-motion e ofereça um fade mais calmo ou nenhuma animação para quem pede menos movimento.
Perguntas frequentes
Qual a diferença entre uma transition e uma animation?
Uma transition reage a uma mudança de valor, como uma classe adicionada ou o início de um hover, e só vai do valor antigo para o novo. Uma animation usa @keyframes, pode ter muitos passos, pode repetir ou alternar, e roda assim que é aplicada. Use transitions para mudanças de estado e keyframes para loaders e chamadas de atenção.
Por que minha transition não roda?
Causas comuns: a propriedade não é animável (display não era, até o allow-discrete), o valor inicial é auto (height: auto não pode ser interpolado sem recursos mais novos), o elemento acabou de ser inserido e não há estilo anterior, ou a transition foi declarada só no estado de hover e por isso volta de uma vez quando o mouse sai.
Quais propriedades são baratas de animar?
transform e opacity normalmente podem ser tratadas pelo compositor sem recalcular o layout nem repintar, então continuam suaves. Animar width, height, top, left ou margin força layout a cada frame, e box-shadow ou filter causam repintura, o que pode travar em celulares mais lentos.
O que significa cubic-bezier?
Descreve a curva de easing com dois pontos de controle, cubic-bezier(x1, y1, x2, y2). Os valores x são tempo e precisam ficar entre 0 e 1; os valores y são progresso e podem sair desse intervalo, o que cria um overshoot ou um pequeno quique de volta.
Como respeitar o movimento reduzido?
Use a media query @media (prefers-reduced-motion: reduce) para encurtar ou remover o movimento. Uma abordagem simples é manter as mudanças de cor e opacidade mas tirar os transforms, ou definir transition-duration e animation-duration com um valor mínimo dentro dessa query.
Como ler uma curva de easing
O eixo horizontal de uma curva de easing é o tempo e o vertical é o progresso. Um começo íngreme significa que a maior parte do movimento acontece cedo, e é assim que o ease-out dá aquela sensação de resposta rápida. Um começo plano significa que o elemento hesita primeiro, e é por isso que ease-in em um hover parece lento.
linear é uma diagonal reta e parece mecânico para movimento, embora combine com spinners e ciclos de cor. steps(4) pula em quatro saltos iguais em vez de deslizar, útil para sprite sheets ou um efeito de digitação.
Transition ou @keyframes?
Escolha uma transition quando há dois estados e é o usuário que causa a mudança: hover, foco, aberto, selecionado. O navegador calcula os frames intermediários e até reverte suavemente se o estado voltar no meio do caminho.
Escolha @keyframes quando o movimento tem mais de dois passos, deve repetir ou precisa tocar sozinho quando a página carrega. animation-fill-mode: both mantém o primeiro frame aplicado durante qualquer delay e o último frame depois do fim, o que evita um piscar.
Animando de e para display: none
Navegadores mais novos deixam display e overlay participarem de transitions quando você adiciona transition-behavior: allow-discrete, e @starting-style dá a um elemento um estilo de onde animar no primeiro render. Juntos, permitem fazer fade-in e fade-out de popovers e diálogos sem script.
O suporte a esses recursos chegou ao longo de 2023 e 2024 e é irregular em versões mais antigas, então trate-os como uma melhoria: sem suporte, o elemento simplesmente aparece e some na hora.
Transition vs @keyframes em um relance
Quando usar cada um
Animação com @keyframes
Começa quando
O valor de uma propriedade muda
A animação é aplicada
Passos
Só início e fim
Quantos você escrever
Repetição
Não
animation-iteration-count, incluindo infinite
Reverte suavemente no meio
Sim
Só com trabalho extra
Ideal para
Estados de hover, foco, aberto e selecionado
Loaders, chamadas de atenção, efeitos de entrada
Quanto custa animar cada propriedade
Trabalho de renderização por frame (regra geral, varia por navegador)
Propriedade
Layout
Pintura
Só composição
transform, opacity
Não
Não
Normalmente
color, background-color
Não
Sim
Não
box-shadow, filter
Não
Sim
Não
width, height, padding, margin
Sim
Sim
Não
top, left (posicionado)
Sim
Sim
Não
Uma rede de segurança para movimento reduzido
Mantém as mudanças de estado mas remove o deslocamento. Coloque perto do fim da folha de estilos.
Fade de um popover na entrada e na saída com @starting-style
Uma melhoria para navegadores que suportam allow-discrete e @starting-style. Os outros mostram e escondem na hora.
20 microinterações para copiar
Passe o mouse ou dê foco em cada resultado para ver funcionando. Todo snippet termina com uma regra de movimento reduzido.
Card que sobe
Eleva um card e aprofunda a sombra.
Botão que cresce
Uma pequena escala no hover e um afundar no clique.
Sublinhado deslizante
A linha cresce a partir da esquerda usando o tamanho do background.
Preenchimento de cor
As cores de fundo e de texto trocam juntas.
Seta que avança
O ícone se move enquanto o texto fica parado.
Ícone que gira
Um mais vira um xis.
Anel de foco com fade
O deslocamento do outline é animado para quem usa teclado.
Zoom de imagem na moldura
A imagem aumenta, mas a moldura a recorta.
Legenda que aparece
A legenda desliza para cima a partir da borda inferior.
Brilho suave
Uma sombra colorida aparece com fade.
Inclinação sutil
Alguns graus de rotação deixam um adesivo com cara de solto.
Borda que se desenha
A cor da borda muda de cinza para o azul da marca.
Esmaecer os outros
Passar o mouse em um item esmaece os irmãos.
Reflexo que varre
Uma faixa de luz atravessa o elemento no hover.
Botão de switch
Um checkbox estilizado como switch com o botão deslizando.
Chevron de acordeão
O marcador gira quando um elemento details abre.
Ponto pulsante (keyframes)
Um ponto de status em loop feito com @keyframes.
Spinner (keyframes)
O timing linear mantém a rotação uniforme.
Fade para cima no carregamento (keyframes)
fill-mode both o mantém escondido durante o delay.
Tremida de erro (keyframes)
Uma tremida horizontal curta que aqui toca uma vez no hover.
Curva de easing cubic-bezier({values})
Playground de transitions
Tocar para frente
Tocar para trás
Seu dispositivo pede movimento reduzido, então a prévia pula em vez de se mover.