Transições

4.1 Propriedade transition

Transições CSS (transition) permitem animar mudanças nos valores de propriedades CSS, criando transições suaves entre seus estados iniciais e finais. Isso é uma ferramenta poderosa que melhora a usabilidade, adicionando dinamismo às páginas da web. Vamos explorar os principais aspectos das transições, incluindo propriedades, duração e funções de timing.

A propriedade transition combina todos os aspectos da transição em uma única propriedade. Ela pode incluir:

1. Propriedades que serão animadas.
2. Duração da animação.
3. Função de timing.
4. Atraso antes do início da animação (opcional).

Sintaxe:

    
      element {
        transition: property duration timing-function delay;
      }
    
  

Onde:

• property: propriedade à qual a transição é aplicada (por exemplo, width, height, background-color)
• duration: duração da transição (por exemplo, 2s para dois segundos ou 500ms para 500 milissegundos)
• timing-function: função de timing que determina a velocidade de mudança da animação (por exemplo, ease, linear, ease-in, ease-out, ease-in-out)
• delay: atraso antes do início da transição (por exemplo, 1s para um segundo)

Exemplo:

    
      
       
   
       
   
       
   

     Conteúdo 
   
    
  

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s ease-in-out, background-color 1s ease;
      }
    
  

Explicação do código:

• transition: width 2s ease-in-out, background-color 1s ease: define duas transições: uma para a propriedade width com duração de 2 segundos e função de timing ease-in-out, e outra para a propriedade background-color com duração de 1 segundo e função de timing ease

4.2 Propriedades das transições

1. Propriedade transition-property

A propriedade transition-property determina quais propriedades do elemento terão transições aplicadas.

Sintaxe:

    
      element {
        transition-property: property1, property2 ...;
      }
    
  

Exemplo:

    
      .box {
        transition-property: width, height, background-color;
      }
    
  

2. Propriedade transition-duration

A propriedade transition-duration define a duração da transição.

Sintaxe:

    
      element {
        transition-duration: time;
      }
    
  

Exemplo:

    
      .box {
        transition-duration: 2s, 1s, 3s;
      }
    
  

3. Propriedade transition-timing-function

A propriedade transition-timing-function define a velocidade de mudança da animação ao longo do tempo.

Sintaxe:

    
      element {
        transition-timing-function: function;
      }
    
  

Exemplo:

    
      .box {
        transition-timing-function: ease-in, linear, ease-out;
      }
    
  

4. Propriedade transition-delay

A propriedade transition-delay define o atraso antes do início da transição.

Sintaxe:

    
      element {
        transition-delay: time;
      }
    
  

Exemplo:

    
      .box {
        transition-delay: 1s, 0s, 500ms;
      }
    
  

4.3 Duração das transições

A duração da transição define quanto tempo a animação de mudança de propriedade vai durar. Ela é definida em segundos (s) ou milissegundos (ms).

Exemplo:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s, height 1s, background-color 500ms;
      }
    
  

Explicação do código:

• transition: width 2s, height 1s, background-color 500ms: define que a transição para a propriedade width vai durar 2 segundos, para height — 1 segundo, e para background-color — 500 milissegundos.

4.4 Funções de timing

Funções de timing definem como o valor da propriedade muda ao longo do tempo. Elas permitem criar diversos efeitos de animação.

Funções de timing principais:

• ease: animação começa devagar, acelera no meio e desacelera no final
• linear: animação ocorre a uma velocidade constante do início ao fim
• ease-in: animação começa devagar e acelera
• ease-out: animação começa rápido e desacelera
• ease-in-out: animação começa e termina devagar, acelerando no meio

Exemplo:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        transition: width 2s ease-in-out, height 1s linear, background-color 500ms ease;
      }
    
  

Explicação do código:

• ease-in-out: transição suave que começa e termina devagar
• linear: transição a uma velocidade constante
• ease: transição com início e fim devagar, acelerando no meio