Executando verificação de segurança...
5

Propriedade Transition no CSS

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;}
Carregando publicação patrocinada...
2
1

Que massa! Eu fiz esse post para ajudar o pessoal da minha universidade que está começando agora com o HTML e CSS, porém fico feliz ter ajudado pessoas além desse escopo :)