@-webkit-keyframes hehe{
0 {background: red;}
20% {background: blue;}
50% {background: pink;}
75% {background: #CCC;}
100% {background: #f60;}
}
.box1{
width: 100px;
height: 100px;
background: green;
animation:hehe 5s infinite;
}
其它修饰词：infinite、backwards 、forwards、aleternate 1s
@-webkit-keyframes hehe{
0 {background: red;}
20% {background: blue;}
50% {background: pink;}
75% {background: #CCC;}
100% {background: #f60;}
}
@-webkit-keyframes aa{
0 {top:20px;}
20% {top: 100px;}
50% {top: 200px;}
75% {top:300px;}
100% {top:400px;}
}
.box1{
width: 100px;
height: 100px;
background: green;
animation:hehe 5s forwards;
}
.box2{
width: 100px;
height: 100px;
position: relative;
top:10px;
background: green;
animation:aa 5s infinite;
}
