<html>
<head>
<style>
div
{
width:100px
height:100px
background:red
position:absolute
animation:myfirst 5s
-webkit-animation:myfirst 5s
animation-fill-mode: forwards
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:redleft:500pxbottom:50px}
25% {background:redleft:500pxheight:130pxbottom:50px}
50% {background:redleft:500pxheight:160pxbottom:50px}
75% {background:redleft:500pxheight:190pxbottom:50px}
100% {background:redleft:500pxheight:210pxbottom:50px}
}
</style>
</head>
<body>
<div></div>
</body>
</html>这只是个演示的demo，方法就是这样，animation-fill-mode: forwards这一句给你解释下，这句就是当动画完成时，动画会停留在最后一帧。其他代码都比较简单，不懂随时问我。
希望能够帮助到你，！
可以做一个animation，举一个例子，让一个元素在某一个范围之内，左距离和上距离同时改变。但是，弧线要让两个距离改变速度变化不一致，所以最好一个元素改变上方距离（可以是top也可是margin-top），里面嵌入一个元素改变左边距离。例如，假如你要让横轴均匀变化，纵轴不均匀变化，轨迹为⌒形，可以左变化为{from{margin-left:0px}to{margin-left:200px}}，运动方式设为linear，然后上下变化可以{from{margin-top:100px}50%{margin-top:0px}to{margin-top:100px}}，运动方式设为ease-in-out。由于时间仓促我没有具体实验过，而且表达可能不太清楚，请原谅。
