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