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;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: 3s;
}
Tipos de Animação no CSS
ease
-> Início lento e fim rápido!
linear
-> Mesma velocidade no início e fim!
ease-in
-> Início lento!
ease-out
-> Fim lento!
ease-in-out
-> Início e fim lento!
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;}