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:
@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:
@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:
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
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
Esses foram exemplos bem simples, mas é possível fazer bastante coisa com essas animações usando apenas css.
Compartilhe isso:
