一般来说，增加动画可以使用：animation ,想要过渡的话使用transition.
transition: 参考 http://www.w3school.com.cn/cssref/pr_transition.asp
animation:参考 http://www.w3school.com.cn/cssref/pr_animation.asp
W3school资料还是很好的。
写一个小例子给你看看，你就明白了
html内容如下
<div class="left">左边的内容</div><div class="right">
<div class="right_content">右边的内容</div>
</div>
css内容如下：
.left{width:200pxfloat:leftmargin-right:-200pxbackground: #00ca57}.right{width:100%float:left}
.right_content{margin-left:200pxbackground: #269abc}
完美实现，请采纳~！
<pre t="code" l="html"><!DOCTYPE html><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这一句给你解释下，这句就是当动画完成时，动画会停留在最后一帧。其他代码都比较简单，不懂随时问我。
希望能够帮助到你，！
