1. O Que E CSS Transition

A propriedade transition do CSS permite animar suavemente a mudanca de valor de outras propriedades CSS ao longo do tempo. Em vez de alteracoes instantaneas — por exemplo, quando um elemento muda de cor ao ser hovereado — a transicao interpola os valores entre o estado inicial e o estado final durante um intervalo definido pelo desenvolvedor.

Introduzida como parte do CSS3, a propriedade transition e amplamente suportada em todos os navegadores modernos e representa a forma mais simples e eficiente de adicionar movimento a uma interface — sem JavaScript, sem bibliotecas externas.

2. Sintaxe e Propriedades

A propriedade transition e um shorthand que combina quatro sub-propriedades:

• transition-property: qual propriedade CSS sera animada (ex: opacity, transform, all).
• transition-duration: quanto tempo a transicao dura, em segundos (s) ou milissegundos (ms).
• transition-timing-function: a curva de aceleracao da animacao (ex: ease, linear, cubic-bezier).
• transition-delay: quanto tempo esperar antes de iniciar a transicao apos o gatilho.

E possivel encadear multiplas transicoes separando-as por virgula: transition: opacity 300ms ease, transform 200ms ease-out 50ms;. Isso permite controle granular por propriedade, cada uma com sua propria duracao e timing.

"A CSS Transition e a ferramenta mais subestimada do front-end. Com quatro valores bem escolhidos, voce transforma uma interface estatica em algo que parece vivo."

3. Timing Functions Explicadas

A timing function define como a velocidade da animacao varia ao longo do tempo. As opcoes nativas do CSS sao:

• linear: velocidade constante do inicio ao fim. Ideal para rotacoes continuas.
• ease: comeca devagar, acelera no meio e desacelera no final. E o valor padrao e o mais natural para a maioria dos casos.
• ease-in: comeca lentamente e acelera ate o final. Util para elementos que saem da tela.
• ease-out: comeca rapido e desacelera no final. Ideal para elementos que entram na tela.
• ease-in-out: combina aceleracao no inicio e desaceleracao no final. Muito usado em modais e cards.
• steps(n, direction): divide a animacao em n saltos discretos. Util para sprites e efeitos de maquina de escrever.

4. Cubic-Bezier Customizado

Todas as timing functions nativas do CSS sao na verdade atalhos para valores especificos de cubic-bezier(x1, y1, x2, y2). Por exemplo, ease equivale a cubic-bezier(0.25, 0.1, 0.25, 1.0).

Com o cubic-bezier customizado, voce tem controle total sobre a curva de aceleracao. Os quatro parametros definem dois pontos de controle de uma curva de Bezier cubica:

• x1, y1: coordenadas do primeiro ponto de controle (x deve estar entre 0 e 1).
• x2, y2: coordenadas do segundo ponto de controle (x deve estar entre 0 e 1).

Valores de y fora do intervalo [0, 1] criam efeitos de "bounce" e "overshoot", onde o elemento ultrapassa o valor final antes de se estabilizar — muito usado em animacoes de botoes e notificacoes.

5. Boas Praticas de Performance

Nem todas as propriedades CSS sao iguais do ponto de vista de performance. Animar as propriedades erradas pode causar reflow e repaint desnecessarios, deixando a animacao com jank (travamentos).

• Prefira transform e opacity: essas duas propriedades sao compostas pelo GPU e nao causam reflow. Sao as mais performaticas para animar.
• Evite animar width, height, top, left: essas propriedades causam reflow do layout, o que e custoso em paginas complexas.
• Use will-change com cautela: a propriedade will-change: transform avisa o navegador que um elemento sera animado, permitindo otimizacoes previas. Mas use apenas quando necessario, pois consome memoria.
• Mantenha duracoes humanamente percepciveis: transicoes abaixo de 100ms parecem instantaneas, acima de 500ms parecem lentas. O intervalo ideal para a maioria dos elementos de UI fica entre 150ms e 350ms.

6. Perguntas Frequentes

Qual a diferenca entre transition e animation?

transition reage a mudancas de estado (ex: hover, focus, adicao de classe) e vai de um valor para outro. animation usa keyframes e pode ter multiplos estados intermediarios, looping e controle mais granular — mas tambem e mais complexa de usar.

Por que minha transicao nao funciona com display: none?

A propriedade display nao e animavel. Ao trocar um elemento de display: none para display: block, o navegador nao consegue interpolar os valores. A solucao mais comum e usar opacity combinado com visibility, ou pointer-events: none.

Posso usar transition: all?

Tecnicamente sim, mas nao e recomendado em producao. transition: all aplica a transicao a todas as propriedades animaveis do elemento, o que pode gerar animacoes inesperadas e impactar performance. Prefira listar explicitamente as propriedades que devem ser animadas.

Como respeitar as preferencias de acessibilidade?

Usuarios com disturbios vestibulares podem ser afetados por animacoes. Use a media query @media (prefers-reduced-motion: reduce) para desativar ou reduzir transicoes para quem configurou essa preferencia no sistema operacional. E uma boa pratica de acessibilidade e afeta positivamente a experiencia de uma parcela significativa dos usuarios.