.rotation {
-webkit-animation-name: rotation;
-webkit-animation-duration: 30s;
-moz-animation-name: rotation;
-moz-animation-duration: 30s;
}
#sun {
background: url("http://img.mukewang.com/55ade004000106c202010201.png") no-repeat;
position: absolute;
z-index: 1;
top: -30px;
height: 201px;
width: 201px;
right: 40%;
}
@-webkit-keyframes rotation {
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(-2000px) translateY(400px);
}
/*?*/
}
@-moz-keyframes rotation {
/*?*/
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(-2000px) translateY(400px);
}
}
animation-name:是动画帧的设置 通过关键字keyframes 进行设置
duration设置动画完成的时间
本例中有一个div ID sum 显示一个太阳落山的效果
实际上这个和js定时器的功能类似 在指定的时间切换样式