CSS3中Transitions属性的使用方法_HTML5中文网 - 中国领先的HTML5技术门户--HTML5中文学习网

在CSS 3中，Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能。可通过transtions属性来使用Transtions功能。

Transitions属性图示

transtions属性的使用方法如下所示：

transtion:property duration timing-function

其中property表示属性进行平滑过渡，duraton表示在多长时间内完成属性值的平滑过渡，tinming-function表示通过什么方法来进行平滑过渡。

div { width:120px; height:90px; background:blue; transition:background-color 2s linear; }div:hover { background:orange; }

上面的实例中，把div元素的蓝色背景在2秒钟之内平滑过渡到橙色背景。

当然还有另外一种使用Transitions功能的方法，就是将Transitions属性中的参数分开来写，例如下面的代码：

transtion-property:backgroud-color; transtion-duration:1s; tarnstion-timing-function:linear;

使用Transitions功能同时对于多个属性值进行平滑过渡:

div { height:90px; background:blue; width:120px; -moz-transition:background-color 1s linear,height 1s linear; }div:hover { background:orange; height:240px; }

上面的实例中，元素从背景为蓝色、高度为120像素平滑过渡到背景为橙色，高度为240像素。

使用Transitions功能实现元素的移动与旋转动画：

img { position:absolute; top:270px; left:10px; -moz-transform:rotate(0deg); -moz-transition:left 5s linear,-moz-transform 1s linear; }img:hover { left:230px; -moz-transform:rotate(15deg); }

上面的实例中，使定位图片元素从距左边距10像素、旋转角度为0状态平滑过渡到距左边距230像素、旋转15度。