测试代码及说明：
<!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>
演示效果：
