A regra @keyframes vai definir as etapas da sua animação. Com ela você vai informar o início e o final do valor da propriedade CSS que você deseja animar.
Vale lembrar a animação acontece na transição de um valor para o outro. Exemplo, na transição de 100px de width para 200px de width. Ou na transição do red para o blue (no caso de cores).
Não tem mistério para declararmos ela. Basta nomear a sua animação e definir as etapas da mesma.
@keyframes estica {
0% {
width: 100px;
}
100% {
width: 200px;
}
}
Você pode definir as etapas de duas formas. A mais comum é através de porcentagens, já que te dá maior controle entre as etapas. Então o que você definir dentro de 0% {}, fará parte do início da sua animação.
Não existem limites de etapas. Você pode ter 0%, 20%, 32%, 100% e por ai vai. O ideal é sempre ter a etapa 0% e a 100% na sua animação.
Outra forma de declarar é através do from e to. O from é a mesma coisa que 0% e o to a mesma coisa que 100%. Por isso acredito que declarar logo em porcentagens facilita o trabalho.
As vezes durante as etapas de uma animação, você deseja voltar a um mesmo estado que já aconteceu durante ela. Exemplo:
Imagina que você deseja que a div vá de: vermelho > amarelo > verde > amarelo > vermelho
As cores vermelho e amarelo aparecem duas vezes, então você pensaria em escrever o código assim (vou dividir 100% em 5 vezes, já que possuímos 5 etapas):
@keyframes sinal {
0% {
background: red;
}
25% {
background: yellow;
}
50% {
background: green;
}
75% {
background: yellow;
}
100% {
background: red;
}
}
A forma acima está correta, mas você pode otimizar este código. Evitar repetições é uma das principais regras da codificação. Então você pode escrever assim:
@keyframes sinal {
0%, 100% {
background: red;
}
25%, 75% {
background: yellow;
}
50% {
background: green;
}
}
Basta adicionar uma vírgula e colocar o momento da próxima etapa. Você pode colocar quantas quiser em uma mesma linha.
Dê uma olhada no exemplo dos planetas animados com CSS abaixo:
See the Pen planets-perfect by André | Origamid (@origamid) on CodePen.
Uma dica para você se dar bem com as animações com CSS, é aprender a utilizar bem a propriedade transform. Essa propriedade é a indicada para animarmos o posicionamento dos elementos (por exemplo, fazer uma div rodar como um planeta).
O fato é que animação de transform são mais leves para o browser. Eu ainda vou fazer uma postagem falando mais sobre o transform. Agora vamos fazer um simples exemplo.
Para fazer um elemento girar em torno de um eixo é necessário animar o transform: rotate() translateY();
O círculo pode ser feito facilmente com:
.circle {
width: 10px;
height: 10px;
border-radius: 50%;
background: DodgerBlue;
margin: 60px auto;
}
Para animarmos precisamos primeiro definir os @keyframes. Eu quero rode 360 graus, então para isso eu devo ir de: transform: rotate(0deg); para transform: rotate(360deg);
O problema é que se adicionarmos apenas o rotate, o círculo irá girar em cima de seu próprio eixo. E como ele possui uma cor flat azul, você não será capaz de ver ele rodando.
Mas ai basta movermos um pouco o eixo Y dele (ou seja, colocar ele um pouco para cima). O seu eixo inicial continuará no mesmo ponto de partida, mas agora ele vai passar a rodar em volta dele e não em cima dele. Vai ficar assim:
@keyframes circle {
0% {
transform: rotate(0deg) translateX(25px);
}
100% {
transform: rotate(360deg) translateX(25px);
}
}
Por último temos que adicionar a propriedade animation ao círculo (ainda vamos falar dela nas próximas aulas.) E assim fica ele ao final:
See the Pen circle by André | Origamid (@origamid) on CodePen.
Todas as postagens sobre animações com CSS: