详细w3c这里
http://www.cnblogs.com/happyPawpaw/archive/2012/09/12/2681348.html
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
} @keyframes myfirst
{
from {background:red;}
to {background:yellow;}
} @-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
} @-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
} @-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body> <div></div> <p><b>注释：</b>本例在 Internet Explorer 中无效。</p> </body>
</html>