测试实例如下：
<div class="outer">
<div class="ball"></div>
</div>
.outer {
width: 1000px;
height: 500px;
background: pink;
position: relative;
}
.ball {
position: absolute;
width: 50px;
height: 50px;
background: aqua;
animation: move1 1s 0s 1 linear, move2 1s 0s 1 cubic-bezier(1,0,1,1), move3 1s 1s 1 linear, move4 1s 1s 1 cubic-bezier(0,1,1,1);
animation-fill-mode: forwards;
}
@-webkit-keyframes move1 {
0% {
top: 0;
}
100% {
top: 200px;
}
}
@-webkit-keyframes move2 {
0% {
left: 0;
}
100% {
left: 200px;
}
}
@-webkit-keyframes move3 {
0% {
top: 200px;
}
100% {
top: 0;
}
}
@-webkit-keyframes move4 {
0% {
left: 200px;
}
100% {
left: 400px;
}
}
