测试代码及说明：
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Simple CSS3 Animation</title> <style type="text/css"> #demo { position: absolute; left: 30%; top: 30%; background-color: red; width: 200px; height: 200px; -webkit-animation: animation1 2s linear forwards; /*只有Webkit内核的浏览器才能解析*/ -moz-animation: animation1 2s linear forwards; /*Firefox浏览器私有属性*/ -o-animation: animation1 2s linear forwards; /*Opera浏览器私有属性*/ -ms-animation: animation1 2s linear forwards; /*IE浏览器私有属性*/ animation: animation1 2s linear forwards; /*Firefox浏览器私有属性*/ } @-webkit-keyframes animation1 { 0% { background: red; } 50% { background: blue; } 100% { background: yellow; } } @-moz-keyframes animation1 { 0% { background: red; } 50% { background: blue; } 100% { background: yellow; } } @-o-keyframes animation1 { 0% { background: red; } 50% { background: blue; } 100% { background: yellow; } } @-ms-keyframes animation1 { 0% { background: red; } 50% { background: blue; } 100% { background: yellow; } } @keyframes animation1 { 0% { background: red; } 50% { background: blue; } 100% { background: yellow; } } </style> </head> <body> <div id="demo"> </div> </body> </html>
演示效果：
