Utilizando animações com CSS3
Sinto que, atualmente, sites estáticos(sem projeções gráficas, ou interativos) deixaram de fazer impacto. A interatividade com o usuário se torna cada vez mais necessária. Ou seja, na criação de um website tornou-se necessário algo diferente do conteúdo. Se tornou necessário algo que prenda a atenção do usuário, além do conteúdo.
Com as novas tecnologias voltadas para a internet, o que não faltam são interativos para o usuário. Vídeos em 360°, menus em 3D, objetos desenhados em plataformas 3D e aplicadas em sites convencionais. O usuário está cada vez mais interessado em novidades tecnológicas, e com isso, ficando bem exigentes na hora visitar páginas web e coisas relacionadas. Por isso, nós desenvolvedores web, não podemos ficar pra trás. Não vamos desapontá-los, certo?!
Antigamente, para poder criar algo relacionado à animação em um website, era necessário que usássemos recursos como o flash e java, porém, como nossos queridos amigos do css3 são muito bons, hoje conseguimos criar nossas animações apenas utilizando código de css.
Pra começar, o que é uma animação? Para todos os fins, você, programador, vai destrinchar todos os movimentos possíveis de um elemento. Para isso, você vai atribuir mais de um estilo, em momentos distintos, e fazer com que eles se completem, criando um movimento para determinado elemento. Parece complicado, mas é mais fácil do que soa. Por exemplo:
No exemplo acima, vemos uma div com 50px de width e 50px de heigth que muda cor, ou seja, ela tem um background-color inicial amarelo, que com o correr de 4s se torna vermelho. Vamos ver como isso acontece:
Veja que para a div só aplique estilos já conhecidos. Adicionei apenas o animation-name, nomeando a animação, e configurei a duração dessa animação, ou seja, o tempo que o keyframe vai percorrer. Por falar em keyframe, você sabe o que é isso? Vamos explicar. Essa propriedade (@.keyframe) funciona exclusivamente para destrinchar os momentos dessa transição. No exemplo acima, como o elemento vai possuir apenas dois estágios, utilizamos as propriedades “from” e “to”. No caso o “from” configurou o estado inicial do elemento(background-color: yellow;) e o “to”, o final(background-color: red;).
O keyframe pode trabalhar de outras formas, se necessário. Vou mostrar um exemplo onde o elemento terá mais de um estágio, ou seja, entre o seu estado inicial e seu estado final, ele passará por diversas formas, veja só:
Vamos discutir o que houve. O elemento estilizado também é uma div 50x50px. Nessa caso, não utilizamos “from” e “to”, porque não são apenas dois estágios. Nesse caso utilizamos porcentagem referente ao tempo, ou seja, em 0% dos 4s(animation-duration) o background-color será configurado como blue, e posicionado à left:0px e top:0px, já em 25% dos 4s o background-color vai ser yellow em letf:50px e top:0px. Veja como fica o código css:
Da mesma forma, nomeamos a animação, demos um tempo de duração, porém utilizamos mais uma propriedade: animation-iteration-count. Essa propriedade define quantas vezes essa animação irá se repetir. Nesse caso, infinitamente. Você pode dar o valor que desejar: animation-iteration-count: number|infinite|initial|inherit. No caso “number” você informa quantas vezes quer que se repita por meio de números. Por exempo: animation-iterarion-count: 5;. A animação se repetirá 5 vezes.
Para destrinchar mais ainda esses movimentos, o css dispõe de várias propriedades diferentes. São elas: animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state e animation-timing-function.
Vamos falar um pouco sobre cada sub-propriedade:
animation-delay: essa sub-propriedade configura o delay entre o tempo em que o elemento é carregado e o inicio da animação. Nada complicado, certo?!
animation-direction: que configura se a animação deve ou não alternar a direção em cada execução durante a sequência de movimentos ou voltar ao ponto inicial e se repetir.
animation-duration: que como já vimos nos exemplos, configura o tempo que uma animação deveria levar para completar o ciclo configurado anteriormente.
animation-iteration-count: que também usamos nos exemplos. É responsável por configurar o numero de vezes que uma animação deveria se repetir.
animation-name: que especifica o nome da animação. Esse nome vai ser necessário para ligar as especificações da animação ao keyframe. Também utilizamos esse. O próximo é bastante usado, apesar de não ter sido usado nos exemplos.
animation-play-state: que permite você pausar e resumir a sequência da animação.
animation-fill-mode responsável por configurar que valores são aplicados pela animação antes e depois de se executar. Por fim, mas não menos importante.
animation-timing-function: responsável por configurar a sincronização da animação, ou seja, como a animação transita por keyframes, por estabilizar curvas de aceleração. Ela possui os seguintes valores: ease, que especifica uma animação com um início lento, em seguida, rápido e, em seguida, termina lentamente (este é o padrão). linear, responsável por especificar uma animação com a mesma velocidade do início ao fim. ease-in, que faz com que uma animação tenha um início lento. Temos a ease-out, que faz com que o final seja lento. E temos a ease-in-out, que faz com que uma animação tenha um início e um fim lentos. Você vai usar muito essa sub-propriedade. Aproveite o máximo dela.
Atualmente todos os browser são adeptos à essa propriedade de css. Veja você mesmo na tabela abaixo. Os números na tabela especificam as primeiras versões do navegador que suporta completamente o uso da propriedade.
Os exemplos passados foram o mínimo do que você pode fazer para tornar seu site mais atrativo e interativo. Lembre-se, o usuário está exigente! Seja criativo e prenda-o no seu website! Mas, nem tudo são rosas. Cuidado para não exagerar! Um site com muitos tipos de animação pode trazer latência para o carregamento do site e causar estresse e desânimo para o usuário. É extremamente importante o cuidado e a dosagem controlada desse recurso. Use com moderação! :D.
