<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这一句给你解释下，这句就是当动画完成时，动画会停留在最后一帧。其他代码都比较简单，不懂随时问我。
希望能够帮助到你，！
div{width: 20px
height: 20px
border: 2px solid #000
border-top: none
border-right: none
transform:rotate(45deg)
}
<div></div>
css部分：
div
{
width:100px
height:100px
background:red
position:relative
animation: mymove 5s infinite /*5s动画持续的时间，infinite播放次数循环，如果只运动一次，则不需要加*/
-webkit-animation: mymove 5s infinite/*Safari and Chrome*/
}
@keyframes mymove /*mymove 为动画的名称*/
{
from {left:0px} /*起点*/
to {left:200px} /*终点*/
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px}
to {left:200px}
}
</style>
