測試代碼及說明：
<!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>
演示效果：
?
