Transições em CSS3 é um recurso bastante interessante e pode ser usado substituindo JavaScript para a construção de menus, mas não apenas com essa finalidade, o uso de transições vai até onde sua imaginação permita.
Para estabelecer uma transição devemos ter um primeiro box com as propriedades com seus valores de início e após isso devemos ter outro box com um determinado seletor (aqui usaremos o hover que é acionado quando o ponteiro do mouse passa sobre o elemento afetado) com as propriedades que devem ser modificadas recebendo novos valores.
Exemplo:
#box-transicao {
width: 300px;
height: 300px;
background: orange;
}
#box-transicao:hover {
width: 400px; /*largura alterada para 400px*/
background: black; /*Fundo alterado para preto*/
}
No exemplo acima a transição funciona porém ela será realizada de modo abrupto. Para que a transição ocorra de forma suave vamos utilizar uma propriedade chamada "transition". Essa propriedade nos dirá quais propriedades serão afetadas pela transição, o tempo da transição, à curva de velocidade e o atraso. Obviamente, como em outras propriedades não precisamos especificar cada um desses valores. Abaixo colocarei um exemplo utilizando apenas dois desses valores (propriedades afetadas e tempo de execução).
#box-transicao {
width: 300px;
height: 300px;
background: orange;
}
#box-transicao:hover {
width: 400px;
background: black;
transition: background 3s, width 8s; /*Propriedades afetadas pela transição e o tempo que deve durar.*/
}
OBS.: Se desejado que todas as propriedades do box hover recebam os efeitos de transition da mesma forma podemos substituir os nomes das propriedades por "all".
Além de se escrever a propriedade transition em sua forma simples, vista no exemplo, podemos estabelecer cada um dos valores em propriedade próprias:
transition-property: xxxxx; /*Propriedades afetadas*/
transition-duration: Xs; /*Tempo de execução da transição*/
transition-timing-function: xxxxx; /*Curva de velocidade*/
transition-delay: Xs; /*Tempo de atraso*/
Para curva de velocidade podemos decidir por alguns valores como:
ease (PADRÃO, início lento, acelerado no meio e lento no final);
linear (velocidade constante).
Para buscar mais informações sobre transições como também para qualquer coisa em html, css, JS... recomendo o site da W3Schools. O link estará logo abaixo nas referências.
FONTES:
Curso completo de Desenvolvimento Web - Udemy: https://www.udemy.com/curso-completo-do-desenvolvedor-web/
