动画部分是HTML5的新增部分，其特性是可以不借助js代码就可以单单凭借着css部分完成部分动态效果。其效果华丽，强大，炫酷无比，只要你想得到的动态效果都可以通过css3来完成。

　　

<style>
.lizhi{
background: red;
width: 200px;
height: 200px;
border: 1px solid red;
margin-left: 0;
}

.tranition{
/*transition: all 1s linear;*/
transition-property: background,margin,border-radius;/*规定渐变的属性*/
transition-duration: 1s;/*渐变的时间*/
transition-timing-function:linear;/*匀速渐变*/
}

.lizhi:hover{background: yellow;
border-radius: 50% 50%;
margin-left: 60px;}
</style>
<body>
<div class="lizhi tranition">

</div>
</body>

以上部分就是代码，可以看出这里面并没有引入js。

动态效果全部在.tranition这个类里面

第一句：transition: all 1s linear;

这一句是简写，代表所有属性都可以调整，在1秒中执行完毕，执行速度为匀速

下面的几句：

transition-property代表属性，属性之间用逗号隔开，在这里没有声明的属性是不会有渐变效果的，例如如果将background去掉，那么当鼠标放上去的瞬间，这个div的颜色就会改变，而其他的属性则继续延迟执行。

transition-duration代表执行时间，一个完整地动画所需要的时间。

transition-timing-function代表运行时的速度，这个速度由来是根据贝塞尔函数来的，其中可选择由快到慢，由慢到块，匀速，或者自定义等等。