13 out 2016
css3_animations

Criando animações com CSS3

Criar animações em um site vai muito além de apenas deixá-lo mais “bonitinho”; é um ganho no quesito usabilidade. Anima ações do usuário como o hover e o focus, e tornar transições mais suaves (como em um carrossel, por exemplo), já melhoram muito a usabilidade, e nesse post veremos como criar animações.

@keyframes

Uma animação keyframe define basicamente o comportamento dos elementos a serem animados, ou seja, é definido quais propriedades serão alteradas, como e quando serão alteradas, durante a animação.

A utilização dos keyframes é quebrada em duas etapas: criar a animação, e atribuir essa animação.

Existem duas maneiras de criar um keyframe, e as sintaxes são as seguintes:

1
2
3
4
@keyframes move {
  from  {margin-left: 0px;}
  to    {margin-left: 200px;}
}

Nesse primeiro exemplo, foram usados os atributos ‘from’ e ‘to’, que são basicamente os pontos de início e fim da animação.

E a outra maneira de escrever:

1
2
3
4
@keyframes move {
  0%   {margin-left: 0px;}
  100% {margin-left: 200px;}
}

Nesse caso temos maior controle sobre o que acontece durante a animação, já que definimos as alterações para determinados momentos, utilizando a porcentagem, que é relativa ao tempo de animação.

Agora que criamos um keyframe, precisamos atribuí-lo a algum seletor. Para isso, usaremos a animation do CSS3, que possui as seguintes propriedades:

  • Animation-name – é o nome que damos aos @keyframes;
  • Animation-duration – quanto tempo a animação vai durar;
  • Animation-delay – quanto tempo a animação deve esperar para começar;
  • Animation-iteration-count – quantas vezes a animação vai repetir (caso a animação deva acontecer infinitamente,
  • basta definir como infinite);
  • Animation-timing-function – a progressão durante o tempo;

Podemos definir todos esses atributos, ou escreve-lo em uma única linha, da seguinte maneira:

1
Animation: { name   duration   timing-function   delay   iteration-count }
<!DOCTYPE html>
 <html>
  <head>
   <style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      position :relative;
      animation: move 2s infinite;
   }


   @keyframes move {
     from {margin-left: 0px;}
     to {margin-left: 200px;}
   }

  </style>
 </head>
 <body>


  <div></div>

 </body>
</html>

Nesse exemplo, primeiramente definimos o estilo da div: um quadrado de 100px de lado e vermelho, e então definimos a propriedade animation, com o nome do keyframe criado (move), uma duração de 2 segundos e o iteration-timing como infinito. Dos atributos da animation, apenas o nome é de fato obrigatório, já que para os outros existem valores padrões.

Com o que foi definido na keyframe criada, é esperado que a nossa div faça um movimento de 2 segundos movendo-se para a direita.

Vamos a outro exemplo:

<!DOCTYPE html>
<html>
 <head>
  <style>
    .a {
     width: 100px;
     height: 100px;
     background-color: red;
     position: relative;

     animation-name: move;
     animation-duration: 4s;
     animation-iteration-count: infinite;
     float: left;
     margin-left: 5px;
    }

    .b {
     width: 100px;
     height: 100px;
     background-color: black;
     position: relative;

    animation-name: move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
   }


   @keyframes move {
     0%   {background-color:red; left:0px; top:0px;}
     25%  {background-color:yellow; left:200px; top:0px;}
     50%  {background-color:blue; left:200px; top:200px;}
     75%  {background-color:green; left:0px; top:200px;}
     100% {background-color:red; left:0px; top:0px;}
   }
  </style>
 </head>
<body>

<div class="a"></div>
<div class="b"></div>
</body>
</html>

Nesse caso, criamos duas divs, e definimos que a segunda terá um delay de 2 segundos antes de começar a animação. No nosso @keyframes, separamos os passos da animação de acordo com o momento (porcentagem). Então, a cada um segundo (25%) as divs trocarão de cor, e vão se mover, sequencialmente:

  • 200px para a direita
  • 200px para baixo
  • 200px para a esquerda
  • 200px para cima

formando um ciclo infinito, como definido no animation-iteration-count.

    animation_gif

    animation_gif

Outra maneira de suavizar as mudanças de comportamento dos elementos é utilizar a propriedade transition.

<!DOCTYPE html>
<html>
 <head>
  <style>
   div {
    width: 100px;
    height: 100px;
    background: red;
    transition: 2s all;
   }

   div:hover {
    background: blue;
    width: 200px;
   }
  </style>
 </head>
 <body>

  <div></div>

 </body>
</html>

Nesse código transformaremos nossa div durante o hover. Ao passar o mouse por cima da div, ela aumentará sua width para 200px e mudará a cor para azul.

transition_gif

transition_gif

Esses foram exemplos bem simples, mas é possível fazer bastante coisa com essas animações usando apenas css.

Leave a Comment