Transicionando Várias Propriedades

As interações reais de interface geralmente envolvem várias propriedades que mudam simultaneamente — cor de fundo, sombra e escala ao passar o cursor. O CSS permite definir uma suavização e uma duração independentes para cada propriedade.

Liste várias transições separando-as por vírgulas. Cada entrada se aplica a uma propriedade de forma independente:

Defina uma velocidade diferente para cada propriedade para obter uma sensação em camadas e natural:

Combine funções de suavização para que cada propriedade tenha um comportamento adequado:

Usar transition: all significa que todas as propriedades alteradas recebem a mesma temporização. Isso pode causar animações indesejadas em propriedades que deveriam mudar instantaneamente (como alterações em display ou position).

As transições CSS podem ser interrompidas. Se o estado de passar o cursor terminar no meio da transição, ela será invertida a partir do valor animado atual, não do estado final. Isso produz reversões suaves, sem saltos bruscos.

Use durações diferentes para a entrada e a saída ao passar o cursor substituindo as transições no estado :hover:

Adicione atrasos crescentes aos elementos irmãos para criar um efeito de revelação escalonado:

Atribua o atraso do efeito escalonado a partir de uma propriedade personalizada CSS definida por JavaScript ou HTML:

Use transições para alterações de dois estados (ocioso → ao passar o cursor). Use animações com @keyframes para sequências de várias etapas, efeitos em loop ou animações iniciadas automaticamente.

Avise ao navegador quais propriedades serão animadas para permitir uma pré-otimização. Use com moderação — isso consome memória da GPU.

Um cartão tem transition: background 150ms, transform 250ms no estado base. Quando o cursor está sobre ele, o que acontece se o usuário o afastar rapidamente no meio da animação?

As transições separadas por vírgulas permitem que cada propriedade tenha sua própria duração, função de suavização e atraso. Evite transition: all — isso pode animar propriedades não intencionais. As transições podem ser interrompidas e inverter o sentido suavemente a partir da posição atual. Use atrasos para criar efeitos escalonados.