Propriedades de animações

7.1 Propriedade animation-name

Animações CSS permitem criar efeitos visuais dinâmicos e suaves, melhorando a interface do usuário e tornando mais interativo. As propriedades de animações permitem controlar vários aspectos da animação, como nome, duração, função de tempo e atraso. Agora vamos ver essas propriedades em detalhes e mostrar como usá-las.

A propriedade animation-name define o nome da animação que será aplicada ao elemento. O nome deve corresponder ao nome definido na regra @keyframes.

Sintaxe:

    
      element {
        animation-name: animation-name;
      }
    
  

Onde:

• animation-name: nome da animação definido em @keyframes

Exemplo:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
      }
    
  

Explicação do código:

• @keyframes moveRight: define uma animação com o nome moveRight, que move o elemento para a direita
• .box: elemento com a animação moveRight aplicada

7.2 Propriedade animation-duration

A propriedade animation-duration define a duração da animação. O valor é especificado em segundos (s) ou milissegundos (ms).

Sintaxe:

    
      element {
        animation-duration: time;
      }
    
  

Onde:

• time: duração da animação (por exemplo, 2s para dois segundos ou 500ms para 500 milissegundos).

Exemplo:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
      }
    
  

Explicação do código:

• animation-duration: 2s: define a duração da animação moveRight para 2 segundos

7.3 Propriedade animation-timing-function

A propriedade animation-timing-function define a velocidade de mudança da animação ao longo do tempo. Ela permite criar vários efeitos de animação, como aceleração, desaceleração, etc.

Sintaxe:

    
      element {
        animation-timing-function: function;
      }
    
  

Onde:

• function: função de tempo que define a velocidade de mudança da animação (por exemplo, ease, linear, ease-in, ease-out, ease-in-out)

Exemplo:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
      }
    
  

Explicação do código:

• animation-timing-function: ease-in-out: define a função de tempo para a animação moveRight, tornando a animação suave com início e fim lentos e aceleração no meio

Principais funções de tempo:

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

7.4 Propriedade animation-delay

A propriedade animation-delay define o atraso antes do início da animação. O valor é especificado em segundos (s) ou milissegundos (ms).

Sintaxe:

    
      element {
        animation-delay: time;
      }
    
  

Onde:

• time: atraso antes do início da animação (por exemplo, 1s para um segundo ou 500ms para 500 milissegundos)

Exemplo:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
      }
    
  

Explicação do código:

• animation-delay: 1s: define um atraso de 1 segundo antes do início da animação moveRight

1

Tarefa

Frontend SELF PT, nível 24, lição 1

Bloqueado

Tempo da animação

Tempo da animação

Abrir

1

Tarefa

Frontend SELF PT, nível 24, lição 1

Bloqueado

Atraso na animação

Atraso na animação

Abrir