CSS3 Animations - Dica

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (1)  (0)

Veja nessa dica como trabalhar com animações na web usando apenas CSS3 sem a ajuda de flash ou javascript

A propriedade animations das CSS3 é uma nova propriedade que permite que animações sejam possíveis usando apenas código CSS, sem nenhum tipo de auxilio do Flash ou javascript.

Sua customização é muito simples, sendo feita em porcentagem, onde 0% é o início da animação e 100% o final dela.

A regra mais importante na criação de animações em CSS é a @keyframes. Até a data da criação dessa dica, essa regra não era suportada no Internet Explorer e para que ela funcionasse em outros navegadores era preciso que fossem inseridos alguns prefixos, como mostra a listagem 1.

Listagem 1: Código para que funcione em diferentes navegadores

@keyframes aprendendoCSS3animation
{
from {background: blue;}
to {background: grey;}
}
  
@-moz-keyframes aprendendoCSS3animation /* Firefox */
{
from {background: blue;}
to {background: grey;}
}
  
@-webkit-keyframes aprendendoCSS3animation /* Safari e Chrome */
{
from {background: blue;}
to {background: grey;}
}
  
@-o-keyframes aprendendoCSS3animation /* Opera */
{
from {background: blue;}
to {background: grey;}
}

Animações criadas pela regra @Keyframes devem ser linkadas a um seletor, caso contrário nada irá acontecer e a animação não irá acontecer.

É extremamente importante que o usuário defina a duração que a animação irá ter, caso contrário ela irá assumir o valor padrão, que é 0 e não irá realizar a animação.

No exemplo dessa dica iremos criar uma animação onde a cor irá alterar após um determinado intervalo de tempo, ou seja, a 25% de um determinado tempo, 50% do tempo e deu 75% de um dado tempo e, finalmente, 100% de um dado tempo.

Listagem 2: Criando animações

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:200px;
height:100px;
background:blue;
animation:aprendendoCSS3animation 20s;
-moz-animation:aprendendoCSS3animation 20s; /* Firefox */
-webkit-animation:aprendendoCSS3animation 20s; /* Safari e Chrome */
-o-animation:aprendendoCSS3animation 20s; /* Opera */
}
  
@keyframes myfirst
{
0%   {background:blue;}
25%  {background:black;}
50%  {background:purple;}
75%  {background:green;}
100% {background:grey;}
}
  
@-moz-keyframes aprendendoCSS3animation /* Firefox */
{
0%   {background:blue;}
25%  {background:black;}
50%  {background:purple;}
75%  {background:green;}
100% {background:grey;}
}
  
@-webkit-keyframes aprendendoCSS3animation /* Safari e Chrome */
{
0%   {background:blue;}
25%  {background:black;}
50%  {background:purple;}
75%  {background:green;}
100% {background:grey;}
}
  
@-o-keyframes aprendendoCSS3animation /* Opera */
{
0%   {background:blue;}
25%  {background:black;}
50%  {background:purple;}
75%  {background:green;}
100% {background:grey;}
}
</style>
</head>
<body>
  
<p><strong>Nota 1:</strong> Infelizmente o exemplo citado não funciona no Internet Explorer</p>
<p><strong>Nota 2:</strong> Quando a animação estiver finalizada, irá voltar ao estado original inicial. </p>
  
<div></div>
  
</body>
</html>
 
Resultado do código da listagem 2

Figura 1: Resultado do código da listagem 2

Essa é uma das inúmeras opções de animações que podemos fazer com CSS3, além de mudar a cor de fundo, podemos mover o elemento, dentre outras diversas opções.

Espero que tenham gostado e até a próxima

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?