Transição - CSS-Tricks | CSS Almanac 2025

A transitionpropriedade é uma propriedade abreviada usada para representar até quatro propriedades extensas relacionadas à transição:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Essas propriedades de transição permitem que os elementos alterem os valores ao longo de uma duração especificada, animando as alterações das propriedades, em vez de fazê-las ocorrer imediatamente. Aqui está um exemplo simples que faz a transição da cor de fundo de um elemento em: hover:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

Esse div levará meio segundo quando o mouse estiver sobre ele para mudar de vermelho para verde. Aqui está uma demonstração ao vivo de tal transição:

Veja o Pen Transition Demo de Louis Lazaris (@impressivewebs) no CodePen.

Você pode especificar uma propriedade particular como temos acima, ou usar um valor de “all” para se referir às propriedades de transição.

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

Neste exemplo acima, o fundo e o preenchimento farão a transição, devido ao valor “all” especificado para a transition-propertyparte da abreviação.

Você pode separar conjuntos de valores por vírgulas para fazer transições diferentes em propriedades diferentes:

div ( transition: background 0.2s ease, padding 0.8s linear; )

Para a maior parte, a ordem dos valores não importa - a menos que um atraso seja especificado. Se você especificar um atraso, deverá primeiro especificar uma duração. O primeiro valor que o navegador reconhece como um valor de tempo válido sempre representará a duração. Qualquer valor de tempo válido subsequente será analisado como o atraso.

Algumas propriedades não podem ser transicionadas porque não são propriedades animáveis. Consulte a especificação para obter uma lista completa de quais propriedades são animáveis.

Ao especificar a transição no próprio elemento, você define a transição para ocorrer em ambas as direções. Ou seja, quando os estilos são alterados (por exemplo, ao passar o mouse sobre), suas propriedades farão a transição, e quando os estilos forem alterados de volta (por exemplo, ao passar o mouse sobre), eles farão a transição. Por exemplo, as seguintes transições de demonstração ao pairar, mas não ao pairar fora:

Veja o Pen zohgt de Louis Lazaris (@impressivewebs) no CodePen.

Isso acontece porque a transição foi movida para o :hoverseletor de estado e não há nenhuma transição correspondente no seletor que visa o elemento diretamente sem o :hoverestado.

Para compatibilidade em todos os navegadores compatíveis, os prefixos do fornecedor são necessários, com a sintaxe padrão declarada por último:

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

O IE10 (a primeira versão estável do IE com suporte transition) não requer o -ms-prefixo.

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.