Capítulo 5: Animações em CSS – Minicurso HTML

Tempo de leitura estimado 5 min de leitura

As animações em CSS permitem que você crie efeitos de transição e movimento em elementos HTML em uma página da web.

Com animações CSS, você pode controlar a duração, o atraso, o tipo de animação e outras propriedades. Neste capítulo, veremos como criar animações em CSS.

Anúncio

Criando animações em CSS

Para criar uma animação em CSS, você precisa definir os seguintes elementos:

  1. A regra @keyframes, que define a animação em si.
  2. A propriedade animation-name, que aponta para a regra @keyframes.
  3. A propriedade animation-duration, que define a duração da animação em segundos ou milissegundos.
  4. A propriedade animation-timing-function, que define o tipo de animação, como linear, ease-in, ease-out, ease-in-out, etc.
  5. A propriedade animation-delay, que define o tempo de espera antes que a animação comece.
  6. A propriedade animation-iteration-count, que define o número de vezes que a animação é executada.
  7. A propriedade animation-direction, que define a direção da animação, como para frente, para trás, alternada, etc.
  8. A propriedade animation-fill-mode, que define como o elemento deve ser estilizado antes e depois da animação.

Aqui está um exemplo de uma animação simples de rotação:

HTML
<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: rotate;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Neste exemplo, a animação começa com o elemento girando de 0 graus para 360 graus, e continua a girar infinitamente. A propriedade animation-name aponta para a regra @keyframes que define a animação em si.

A propriedade animation-duration define a duração da animação em 2 segundos. A propriedade animation-timing-function define a animação como linear, o que significa que a animação progride uniformemente ao longo do tempo.

A propriedade animation-iteration-count define que a animação é executada infinitamente.

Adicionando efeitos de transição

Além das animações de rotação e movimento, você também pode usar animações CSS para criar efeitos de transição entre diferentes estados de um elemento. Aqui está um exemplo:

HTML
<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: background-color 1s ease-in-out;
    }

    .box:hover {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Neste exemplo, a transição ocorre quando o mouse é colocado sobre a caixa. A propriedade transition define a transição que ocorre quando a cor de fundo da caixa muda de vermelho para azul.

A transição leva 1 segundo para ser concluída e usa uma função de temporização ease-in-out, o que significa que a transição começa lentamente, acelera no meio e depois diminui novamente.

Usando animações CSS com jQuery

Você também pode usar a biblioteca jQuery para criar animações em CSS. O jQuery fornece um conjunto de funções que permitem que você crie animações complexas em elementos HTML.

Para começar, você precisa incluir o jQuery em sua página da web. Você pode fazer isso adicionando o seguinte código ao cabeçalho do seu documento HTML:

HTML
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Agora você pode usar as funções do jQuery para criar animações. Aqui está um exemplo de como você pode animar uma caixa usando jQuery:

HTML
<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
  <script>
    $(document).ready(function() {
      $(".box").click(function() {
        $(this).animate({
          width: "200px",
          height: "200px",
          backgroundColor: "blue"
        }, {
          duration: 1000,
          color: "toggle"
        });
      });
    });
  </script>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Visualização

Neste exemplo, a caixa começa com uma largura e altura de 100 pixels e uma cor de fundo vermelha. Quando a caixa é clicada, o código jQuery anima a largura e altura para 200 pixels e a cor de fundo para azul em 1 segundo.

Conclusão

As animações em CSS são uma ótima maneira de adicionar movimento e interatividade às suas páginas da web. Você pode usar as animações CSS para criar efeitos de transição simples ou animações mais complexas.

Com o uso do jQuery, você pode criar animações ainda mais complexas e controladas. Combinado com outras técnicas de design da web, como HTML e JavaScript, as animações em CSS podem ajudar a criar uma experiência de usuário única e envolvente em suas páginas da web.

Você também pode gostar:

+ Não há comentários

Adicione o seu