css3动画之背景颜色的自动切换

因为不同浏览器内核的不同所以会产生浏览器兼容性问题

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset='utf-8'/>
     <title>背景颜色的变换</title>
 <style type="text/css">
 div{
     width: 200px;
     height: 200px;
     background: blue;
     animation:myfirst 5s;
     -moz-animation:myfirst 5s;  /*火狐里面*/
     -webkit-animation:myfirst 5s;  /*谷歌和safair里面*/
     -o-animation:myfirst 5s; /*欧朋浏览器*/
 }
 /*火狐里面*/
 @-moz-keyframes myfirst{
     0%{background: blue}
     25%{background: red}
     50%{background: yellow}
     100%{background: green}
 }
 /*谷歌和Safari里面*/
 @-webkit-keyframes myfirst{
     0%{background: blue}
     25%{background: red}
     50%{background: yellow}
     100%{background: green}
 }
 /*欧朋浏览器*/
 @-o-keyframes myfirst{
     0%{background: blue}
     25%{background: red}
     50%{background: yellow}
     100%{background: green}
 }
 </style>
 </head>
 <body>
 <div><h1>内容是什么</h1></div>
 </body>
 </html>

 <!-- <!DOCTYPE html>
 <html>
 <head>
 <style>
 div
 {
 width:200px;
 height:200px;
 background:red;
 animation:myfirst 5s;
 -moz-animation:myfirst 5s; /* Firefox */
 -webkit-animation:myfirst 5s; /* Safari and Chrome */
 -o-animation:myfirst 5s; /* Opera */
 }

 @keyframes myfirst
 {
 0%   {background:red;}
 25%  {background:yellow;}
 50%  {background:blue;}
 100% {background:green;}
 }

 @-moz-keyframes myfirst /* Firefox */
 {
 0%   {background:red;}
 25%  {background:yellow;}
 50%  {background:blue;}
 100% {background:green;}
 }

 @-webkit-keyframes myfirst /* Safari and Chrome */
 {
 0%   {background:red;}
 25%  {background:yellow;}
 50%  {background:blue;}
 100% {background:green;}
 }

 @-o-keyframes myfirst /* Opera */
 {
 0%   {background:red;}
 25%  {background:yellow;}
 50%  {background:blue;}
 100% {background:green;}
 }
 </style>
 </head>
 <body>

 <div></div>

 <p><b>注释：</b>当动画完成时，会变回初始的样式。</p>

 <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

 </body>
 </html>
  -->

备注部分是w3school上面的例子