Com que o transition se relaciona?

Olá, Pedro. Tudo bem?

Quando um elemento muda de um estado para outro, utilizamos a propriedade de CSS transition para definir algumas características dessa transição, como a sua duração por exemplo. Assim como você comentou, esses estados diferentes podem ser definidos através de pseudo-classes (:hover e :active são as mais comuns).

Observe que no exemplo a seguir foi utilizada a pseudo-classe :hover e no seletor da div normal definimos "transition: width 2s". Dessa forma, ao posicionarmos o cursor do mouse sobre aquele elemento, a largura aumentará de 100px para 300px e esse efeito terá uma duração de 2s.

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

Vale ressaltar que transition é uma propriedade abreviada para transition-property (en-US), transition-duration (en-US), transition-timing-function e transition-delay.

Você pode ler mais sobre o assunto em: https://developer.mozilla.org/pt-BR/docs/Web/CSS/transition

Abraços,