CodeGym/Cursos/Frontend SELF PT/Noções básicas de animação

Noções básicas de animação

Disponível

6.1 Regra @keyframes

Animações CSS permitem criar efeitos visuais complexos e suaves com o mínimo de esforço. A principal ferramenta para criar animações em CSS é a regra @keyframes, que define os quadros-chave da animação e as mudanças de estilo que devem ocorrer em cada quadro.

A regra @keyframes é usada para criar uma animação definindo mudanças nas propriedades CSS em diferentes fases da execução da animação. Os quadros-chave definem quais estilos serão aplicados em determinados momentos durante o processo de animação.

Sintaxe 1:

@keyframes animation-name {
  from {
    /* estilos iniciais */
  }

  to {
     /* estilos finais */
  }
}

Sintaxe 2:

@keyframes animation-name {
  0% {
    /* estilos iniciais */
  }

  100% {
     /* estilos finais */
  }
}

Onde:

  • from corresponde a 0% do tempo da animação
  • to corresponde a 100% do tempo da animação

Exemplo: Mudança suave de cor de fundo

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Animation Example</title>
    <style>
      @keyframes changeColor {
        from {
          background-color: lightblue;
        }

        to {
          background-color: lightcoral;
        }
      }

      .animated-box {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        animation: changeColor 3s infinite;
      }
    </style>
  </head>
  <body>
    <div class="animated-box">Hover over me!</div>
  </body>
</html>

Explicação:

  • a regra @keyframes changeColor define uma animação que altera a cor de fundo do elemento de lightblue para lightcoral
  • a propriedade animation no elemento .animated-box especifica que a animação changeColor deve durar 3 segundos e se repetir infinitamente

6.2 Vários quadros-chave

Você pode usar mais de dois quadros-chave para criar animações mais complexas, definindo estilos para estados intermediários.

Exemplo: Movimento diagonal com mudança de cor

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Keyframes Example</title>
    <style>
      @keyframes moveAndChangeColor {
        0% {
          background-color: lightblue;
          transform: translate(0, 0);
        }

        50% {
          background-color: lightgreen;
          transform: translate(100px, 100px);
        }

        100% {
          background-color: lightcoral;
          transform: translate(200px, 0);
        }
      }

      .animated-box {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        animation: moveAndChangeColor 5s infinite;
      }
    </style>
  </head>
  <body>
    <div class="animated-box">Watch me move!</div>
  </body>
</html>

Explicação:

A regra @keyframes moveAndChangeColor define uma animação que altera a cor de fundo e a posição do elemento em três etapas.

  • No 0% do tempo da animação, o elemento tem cor azul claro e está na posição inicial
  • No 50% do tempo da animação, o elemento tem cor verde claro e se move 100 pixels para a direita e para baixo
  • No 100% do tempo da animação, o elemento tem cor coral claro e se move 200 pixels para a direita

6.3 Exemplos de animações simples

Exemplo 1: Pulsações

Criando um efeito de pulsação, em que o elemento aumenta e diminui suavemente.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pulsing Effect</title>
    <style>
      @keyframes pulse {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.2);
        }

        100% {
          transform: scale(1);
        }
      }

      .pulse-box {
        width: 150px;
        height: 150px;
        background-color: lightpink;
        animation: pulse 2s infinite;
      }
    </style>
  </head>
  <body>
    <div class="pulse-box">Pulsing</div>
  </body>
</html>

Explicação:

  • a regra @keyframes pulse define uma animação que aumenta o elemento para 120% e retorna ao tamanho original
  • a propriedade animation no elemento .pulse-box especifica que a animação pulse deve durar 2 segundos e se repetir infinitamente

Exemplo 2: Rotação

Criando um efeito de rotação contínua do elemento:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Effect</title>
    <style>
      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }

      .rotate-box {
        width: 100px;
        height: 100px;
        background-color: lightseagreen;
        animation: rotate 3s infinite linear;
      }
    </style>
  </head>
  <body>
    <div class="rotate-box">Rotating</div>
  </body>
</html>

Explicação:

  • a regra @keyframes rotate define uma animação que rotaciona o elemento de 0 a 360 graus
  • a propriedade animation no elemento .rotate-box especifica que a animação rotate deve durar 3 segundos, repetir-se infinitamente e ocorrer a uma velocidade constante (linear)
1
Tarefa
Frontend SELF PT,  nível 24lição 0
Bloqueado
Movimento e cor
Movimento e cor
1
Tarefa
Frontend SELF PT,  nível 24lição 0
Bloqueado
Pulsação
Pulsação
Comentários
  • Populares
  • Novas
  • Antigas
Você precisa acessar para deixar um comentário
Esta página ainda não tem nenhum comentário