测试代码及说明：
<!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>
演示效果：
时间： 2024-10-05 02:53:41