13-transition.md

Transições com CSS

Transições no CSS é relativamente fácil, usamos transition: <elemento> <tempo> <tipo-de-transição> para indicar como a transição será feita.

Um exemplo:

div {
  background: blue;
  height: 100vh;
  width: 50vw;
  transition: width 1s ease;
}

div:hover {
  width: 100vw;
}

• Podemos utilizar o all como <elemento> para afetar todos os elementos que estão no seletor, mas fazendo isso a transição irá ser acionada também quando a tela da aplicação for redimensionada.

Próxima página → Manipulação de texto