css3过渡动画怎样使用

通过

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及以下不兼容！

来源： 德客易采