Animações em CSS

Página 25

Animações em CSS

As animações em CSS são uma maneira de adicionar movimento e interatividade aos elementos de uma página web. Com elas, é possível criar efeitos visuais incríveis e dar vida aos elementos estáticos do layout.

Propriedades CSS para animações

Para criar animações em CSS, é preciso utilizar algumas propriedades específicas. As principais são:

• @keyframes: define a animação em si, especificando os estados iniciais e finais dos elementos;
• animation-name: define o nome da animação;
• animation-duration: define a duração da animação;
• animation-timing-function: define o tipo de animação, como linear, ease-in, ease-out, ease-in-out, entre outros;
• animation-delay: define o tempo de espera antes do início da animação;
• animation-iteration-count: define o número de vezes que a animação será executada;
• animation-direction: define a direção da animação, como normal, reverse, alternate, alternate-reverse, entre outros.

Exemplo de animação em CSS

Vamos criar um exemplo simples de animação em CSS para entender melhor como funciona:

  
    /* Definindo a animação */
    @keyframes mover {
      0% { transform: translateX(0); }
      50% { transform: translateX(50px); }
      100% { transform: translateX(0); }
    }

    /* Aplicando a animação */
    .elemento {
      animation-name: mover;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
  

Neste exemplo, criamos uma animação chamada "mover" que faz com que um elemento se mova para a direita e volte para a posição inicial. Para isso, utilizamos a propriedade transform: translateX() para mudar a posição horizontal do elemento.

Em seguida, aplicamos a animação ao elemento usando as propriedades animation-name, animation-duration, animation-timing-function e animation-iteration-count.

Conclusão

As animações em CSS são uma ótima maneira de adicionar interatividade e dinamismo às páginas web. Com as propriedades adequadas e um pouco de criatividade, é possível criar efeitos incríveis que vão impressionar os usuários.

Next page of the Free Ebook:

26Transições em CSS