Propriedade transition

A propriedade transition é uma abreviada para transições suaves, permitindo definir simultaneamente transition-duration, transition-property, transition-timing-function e transition-delay.

Sintaxe

cssseletor {
  transition: valor;
}

A ordem das propriedades não importa, no entanto o tempo de duração (transition-duration) deve vir antes do atraso (transition-delay).

Valores

Consulte as propriedades correspondentes. Valor padrão: all 0s ease 0s.

O valor none cancela todas as transições (elas ocorrerão instantaneamente).

Exemplo

Passe o mouse sobre o bloco - 3 segundos nada acontecerá (há um atraso de 3s), e então ele mudará suavemente sua largura em 2 segundos. Se então você remover o mouse - novamente 3 segundos nada acontecerá, e então a largura diminuirá suavemente para o valor original:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition: width 2s ease 3s;
  width: 100px;
  height: 50px;
}
#elem:hover {
  width: 400px;
}

Результат:

Veja também