通过
CSS3，我们可以在不使用js的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。他的属性为：transition，但是他也有他的缺点，Internet
Explorer 9 以及更早的版本，不支持 transition属性。那么他是怎么应用的呢，比如我们官网首页服务流程的几个小图标，鼠标滑上去会转动。
他的样式是这样去写的：
这样的话当鼠标滑过变成另一种样式就有了一个过渡效果。那么他具体有那些属性呢：
如果你想让他变宽，时间长为两秒，你就可以这样去写，
div
{
transition: width 1s;
-moz-transition: width 1s;
-webkit-transition: width 1s;
-o-transition: width 1s; }
}
不同的浏览器兼容的写法是不一样的，上面已标明。如果是变化高度，只需要把width改成height即可
具体属性为：
transition-property：规定应用过渡的CSS 属性的名称。transition-duration：定义过渡效果花费的时间。默认是0。
transition-timing-function：规定过渡效果的时间曲线。默认是"ease"。
transition-delay：规定过渡效果何时开始。默认是 0。
注意：如果网站要求兼容IE
那么还是不建议去使用。因为这个属性只兼容到IE10，IE9及以下不兼容！
来源：
德客易采
