Transition

• A propriedade transition refere-se ao tipo, duração, delay e propriedade que será utilizada para as animações no CSS.

.e {
	transition: {property} {duration} {timing-function} {delay};
	transition-property: width; /* Apenas o width será animado! */
	transition-duration: 2s; /* Levará 2s para animação chegar ao seu fim! */
	transition-timing-function: ease; /* Tipo de animação! */
	transition-delay: 3s; /* Levará 3s para animação começar! */
}

Tipos de Animação no CSS

1. ease -> Início lento e fim rápido!
2. linear -> Mesma velocidade no início e fim!
3. ease-in -> Início lento!
4. ease-out -> Fim lento!
5. ease-in-out -> Início e fim lento!
6. cubic-bezier(n, n, n, n) -> Permiti criar suas próprias funções para animação!

#div1 {transition-timing-function: linear;}  
#div2 {transition-timing-function: ease;}  
#div3 {transition-timing-function: ease-in;}  
#div4 {transition-timing-function: ease-out;}  
#div5 {transition-timing-function: ease-in-out;}