标签：
因为不同浏览器内核的不同所以会产生浏览器兼容性问题
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=‘utf-8‘/> 5 <title>背景颜色的变换</title> 6 <style type="text/css"> 7 div{ 8 width: 200px; 9 height: 200px; 10 background: blue; 11 animation:myfirst 5s; 12 -moz-animation:myfirst 5s; /*火狐里面*/ 13 -webkit-animation:myfirst 5s; /*谷歌和safair里面*/ 14 -o-animation:myfirst 5s; /*欧朋浏览器*/ 15 } 16 /*火狐里面*/ 17 @-moz-keyframes myfirst{ 18 0%{background: blue} 19 25%{background: red} 20 50%{background: yellow} 21 100%{background: green} 22 } 23 /*谷歌和Safari里面*/ 24 @-webkit-keyframes myfirst{ 25 0%{background: blue} 26 25%{background: red} 27 50%{background: yellow} 28 100%{background: green} 29 } 30 /*欧朋浏览器*/ 31 @-o-keyframes myfirst{ 32 0%{background: blue} 33 25%{background: red} 34 50%{background: yellow} 35 100%{background: green} 36 } 37 </style> 38 </head> 39 <body> 40 <div><h1>内容是什么</h1></div> 41 </body> 42 </html> 43 44 45 46 47 <!-- <!DOCTYPE html> 48 <html> 49 <head> 50 <style> 51 div 52 { 53 width:200px; 54 height:200px; 55 background:red; 56 animation:myfirst 5s; 57 -moz-animation:myfirst 5s; /* Firefox */ 58 -webkit-animation:myfirst 5s; /* Safari and Chrome */ 59 -o-animation:myfirst 5s; /* Opera */ 60 } 61 62 @keyframes myfirst 63 { 64 0% {background:red;} 65 25% {background:yellow;} 66 50% {background:blue;} 67 100% {background:green;} 68 } 69 70 @-moz-keyframes myfirst /* Firefox */ 71 { 72 0% {background:red;} 73 25% {background:yellow;} 74 50% {background:blue;} 75 100% {background:green;} 76 } 77 78 @-webkit-keyframes myfirst /* Safari and Chrome */ 79 { 80 0% {background:red;} 81 25% {background:yellow;} 82 50% {background:blue;} 83 100% {background:green;} 84 } 85 86 @-o-keyframes myfirst /* Opera */ 87 { 88 0% {background:red;} 89 25% {background:yellow;} 90 50% {background:blue;} 91 100% {background:green;} 92 } 93 </style> 94 </head> 95 <body> 96 97 <div></div> 98 99 <p><b>注释：</b>当动画完成时，会变回初始的样式。</p> 100 101 <p><b>注释：</b>本例在 Internet Explorer 中无效。</p> 102 103 </body> 104 </html> 105 -->
备注部分是w3school上面的例子
标签：
原文地址：http://www.cnblogs.com/luoluo189/p/5726808.html
