Dando vida as nossas criações

Chegou a hora de falar sobre umas das coisas mais divertidas da vida! Vamos aprender um pouco sobre animações com CSS3, que é algo tão simples quanto poderoso!

Criando nossa primeira animação

Ok, vamos começar criando uma animação onde um elemento move-se 50px para a direita. Para tal feito animaremos a propriedade transform: translateX();

Primeiro, antes mesmo de pensar no elemento a ser animado, criaremos a animação em si.

  @keyframes exemplo {
  0%   {transform: translateX(0)} /* Início da animação */
  100% {transform: translateX(50px)} /* Fim da animação */
}

Vamos por partes, usamos o @keyframes para declarar nossa animação e atribuir um nome a ela, no caso usamos o nome exemplo. Depois marcamos os pontos para guiar nosso elemento pela "linha do tempo", no exemplo acima estamos dizendo claramente que no início da animação o elemento vai estar na posição 0 e no fim vai estar 50px para o lado.

Mas como fazer isso funcionar?

Criaremos um elemento e usaremos algumas propriedades de animação para atribuir a ele o que acabamos de criar, vamos lá:

Usamos a propriedade animation-name para escolher a animação que será adicionada ao elemento, em nosso caso o nome é exemplo, depois definimos a duração da animação com o animation-duration e por fim usamos o animation-iteration-count para determinar quantas vezes ira se repetir.

Dica: Podemos escrever nossas animações com o shorthand animation, nesse caso o exemplo acima ficaria assim:

  .quadrado {
  width: 100px;
  height: 100px;
  background: #000;
  animation: exemplo 1s infinite;
}

Conhecendo as sub propriedades

Vamos ver rápidamente algumas das maravilhas que as animações em CSS3 tem a nos oferecer :)

  .elemento {
  /* Nome (Definino no @keyframes) */
  animation-name: exemplo;

  /* Duração */
  animation-duration: <numero>;

  /* Curvas de aceleração */
  animation-timing-function: linear | ease /* default */ | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit;

  /* Tempo entre o elemento ser carregado e o inicio da animação */
  animation-delay: <numero>;

  /* Quantidade de repetições */
  animation-iteration-count: <numero> /* Default 1 */ | infinite | initial | inherit; 
}

Keep calm!

Sem desespero, ninguém precisa decorar tudo, o importante é saber o que existe por aí e ter uma referência de onde estudar, e como não vai dar para explicar tudo o que está ai em cima, vou deixar para vocês o link para o melhor lugar do mundo para se aprender sobre animações. Lembrando que vocês podem perguntar o que precisarem aqui nos comentários ;)

Mãos na massa

Agora que temos uma ideia de como isso funciona, vamos criar algumas animações descoladas :)

Dica: Por questões de performance, atualmente é recomendado animar apenas as propriedades transform e opacity, elas são as mais rápidas poís os navegadores modernos já as entendem como propriedades "animáveis ", isso não é um problema uma vez que você pode criar praticamente qualquer animação usando esses caras, porém se for necessáro animar outra propriedade que não é preparada para tal, podemos usar owill-change para dizer ao navegador o que você pretende animar, otimizando a propriedade e o elemento deixando tudo pronto para o show.

  .quadrado {
  will-change: height;
}

Vamos ver alguns exemplos de animações usando transform e opacity.

Animando o rotate

Animando o scale

Animando o opacity

Conclusão

Hoje vimos muita coisa, não se preocupem se tudo parece meio complicado, mesmo porque realmente é rsrsr. Ainda vamos exercitar bastante nossas habilidades com animações nos próximos artigos.

Por hoje é só, criem suas próprias animações e compartilhem aqui ou no facebook ;)

ps: Na parte 2, aprenderemos mais sobre os @keyframes e a "linha do tempo".

Até amanhã.

<-- #4 - Desenhando com amor | Lista completa | #6 - Sombras -->


1,662 0 6