CSS3 Animation Keyframes关键帧

 

详细解答：http://www.w3cplus.com/content/css3-animation

.demo1 {
width: 50px;
height: 50px;
margin-left: 100px;
background: #F32085;
-webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 10s;/*动画持续时间*/
-webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 2s;/*动画延迟时间*/
-webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/
}
@-webkit-keyframes 'wobble' {
0% {
margin-left: 100px;
background: #06F7ED;
}
40% {
margin-left: 150px;
background: #F5EC0F;
}
60% {
margin-left: 75px;
background: #4D16FC;
}
100% {
margin-left: 100px;
background: #F32085;
}
}