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.