CSS3: Transições

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:

W3Schools: https://www.w3schools.com/css/css3_transitions.asp

 Curso completo de Desenvolvimento Web - Udemy: https://www.udemy.com/curso-completo-do-desenvolvedor-web/