CSS

CSS3 Animations: Criando Animações com CSS3

CSS3 Animations: Criando Animações com CSS3
Junte-se a mais pessoas

Entre para nossa lista e receba conteúdos exclusivos e com prioridade

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.

A regra mais importante na criação de animações em CSS é a @keyframes, que infelizmente ainda não está sendo suportada pelo IE, mas em breve espero que isso seja corrigido. 🙂

Para criar as animações é muito simples, basta utilizar o código abaixo:

<!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>

Para que funcione em todos os navegadores é necessário usar um código css especial, segue o código css:

@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;}
}

 

Comments

comments