IT兄弟连 HTML5教程 CSS3属性特效 transition过渡

CSS3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

transition属性是一个简写属性，用于设置四个过渡属性，这四个过渡属性的描述如表1-21：

表1-21  transition过渡属性及描述

transition最简单的用法

下面，我们为一个div设置初始宽度为200px，背景颜色为“red”色并增加“transition: 2s”。当鼠标移入到这个div后，div经过2s后宽度增加到400px，背景颜色变成“pink”色。2s的过渡时间，我们可以见证div的整体变化，代码如下：

将这段代码运行到浏览器中，我们可以一览div的过渡效果。图7-62是笔者为div过渡初期、中期和后期随机截取的三张图，以供读者参考：

另外，transition还可以指定需要过渡的属性，如我们只需要过渡上例div的宽度属性时，只需要将transition属性的值设为“2s width”。这是，当我们将鼠标移入到这个元素时，div背景颜色立马变为了“pink”色，而宽度变化是有过渡的。

我们还可以设置transition的运动样式、延迟时间及运动形式，读者感兴趣可以一一尝试设置运行。