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