A propriedade transition do CSS

Definição e uso

O atributo de transição é um atributo abreviado que define quatro atributos de transição:

Observação:Sempre defina transition-duration Se não for definida a propriedade, não haverá efeito de transição, a menos que o tempo seja 0.

Coloque o ponteiro do mouse no elemento div, sua largura passará de 100px para 300px gradualmente:

div {
  largura: 100px;
  transition: largura 2s;
}

transition: property duration timing-function delay;

Valor	Descrição
transition-property	Define o nome da propriedade CSS que define o efeito de transição.
transition-duration	Define quantos segundos ou milissegundos são necessários para completar a transição.
transition-timing-function	Define a curva de velocidade do efeito de velocidade.
transition-delay	Define quando começar o efeito de transição.

Valor padrão:	all 0 suave 0
Herança:	não
Versão:	CSS3
Sintaxe do JavaScript:	objeto.style.transition="largura 2s"

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Números com -webkit-, -moz- ou -o- indicam a primeira versão com suporte ao prefixo.

Chrome	IE / Edge	Firefox	Safari	Opera
26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-