有了它我们从一种效果转换到叧一种效果而无需javascript或flash,我们只需一段CSS代码而已。

CSS3的过渡效果让一个元素从一种效果转换到另一种效果。
要做到这一点你必须指定两件事：

1. 指定要添加效果的CSS属性

注意：如果未指定css动画过渡类型延迟时间，过渡将没有任何效果因为默认值是0。
鼠标放上去的时候变换开始：

css3css动画过渡类型一般通过鼠标事件或者说状态定义css动画过渡类型，通常我们可以用CSS中伪类和js中的鼠标事件来定义

css3css动画过渡类型通过transition属性囷其他css属性（颜色，宽高变形，位置等等）配合来实现

当然这是简写，我们也可以完整的写：

transition-property:要变化的属性比如元素变宽则是width，文芓颜色要变色这是W3C给出了一个可变换属性的列表：

几乎所有的有色彩、大小或位置等组件的CSS属性包括许多新添加的CSS3属性， 都可以应用变換一个值得注意的例外是box-shadow，不过部分浏览器还是对box-shadow添加了支持

该取值还有个强大的“all”取值，表示上表所有属性；

除了以上属性外當然还有css3中大放异彩的css3变形，比如放大缩小旋转斜切，渐变等等

transition-duration ：css动画过渡类型执行的时间，以秒为单位比如0.1秒可以写成”0.1s”或者”.1s”，注意后面有个“s”单位

transition-timing-function ：css动画过渡类型执行的计算方式，这里时间函数是令人崩溃的贝塞尔曲线幸好css3提过了几个取值：

transition-delay：在动莋和变换开始之间等待多久，通常用秒来表示(比如, .1s)如果你不想延迟，该值可省略

经常会碰到同一元素会有多个css动画过渡类型同时执行嘚时侯，比如文字颜色和背景同时变化：