Css Animações

 

As animações em CSS permitem adicionar movimento e interatividade às páginas da web, criando uma experiência mais envolvente para os usuários. As animações podem ser aplicadas a vários elementos, como imagens, textos e botões, e podem ser acionadas por eventos como a passagem do mouse sobre um elemento ou um clique.

Para criar uma animação em CSS, é necessário utilizar a propriedade animation, que possui diversos subpropriedades para configurar os aspectos da animação, como a duração, a velocidade, a direção e o tipo de animação.

Um exemplo simples de animação em CSS pode ser a transição de cor de fundo de um elemento quando o mouse passa sobre ele. Veja o exemplo abaixo:

html
<style>
  .elemento {
    background-color: blue;
    transition: background-color 0.5s ease;
  }
  
  .elemento:hover {
    background-color: red;
  }
</style>

<div class="elemento">Passe o mouse aqui</div>

Nesse exemplo, a classe .elemento é configurada com uma cor de fundo azul e uma transição de cor de fundo de 0,5 segundos com a propriedade transition. Quando o mouse passa sobre o elemento, a cor de fundo é alterada para vermelho com a pseudo-classe :hover.

Além disso, é possível criar animações mais complexas utilizando a propriedade keyframes, que permite definir uma sequência de etapas da animação. Veja um exemplo abaixo de uma animação de movimento de um elemento:

html
<style>
  .elemento {
    position: relative;
    animation: mover 2s infinite;
  }
  
  @keyframes mover {
    0% { left: 0; }
    50% { left: 50%; }
    100% { left: 0; }
  }
</style>

<div class="elemento">Mova-me!</div>

Nesse exemplo, a classe .elemento é configurada com uma animação de nome mover com duração de 2 segundos e repetição infinita. A animação é definida na regra @keyframes mover, que define as etapas da animação em porcentagens de tempo. No caso, o elemento começa na posição inicial (left: 0), se move até a metade do espaço disponível (left: 50%) e depois retorna à posição inicial.

Com esses exemplos simples, é possível entender o funcionamento básico das animações em CSS e criar animações mais complexas para aprimorar a experiência dos usuários em suas páginas web.