css transition(过渡)属性可以实现动态延展效果，适用于firefox、chrome、Safari、Opera、IE10+浏览器，对IE的10以下版本浏览器无效

测试代码

<style> 
.tdiv{width:100px;height:100px;background:blue;transition:width 2s,height 1s;}
.tdiv:hover{width:600px;height:300px}
</style>
<div class="tdiv"></div>

效果：

请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。

transition属性有4个参数，语法：

transition: property duration timing-function delay;
property:需要经历过渡变化的属性，例如width,height;
duration:过渡历程时间，单位秒，例如 2s;
timing-function:过渡效果的速度曲线;
delay:延迟，多久后开始过渡，共用于过渡开始和还原