既然已经使用CSS3的特性了，那就不妨再多加几个。这里介绍一下前天折腾的-过渡效果（Transition），添加后的样子如首页标题栏、导航栏和各类链接的鼠标滑过效果。

Transition：这个是CSS3中新添加的特性，当元素在大小、颜色、布局、透明度等数值改变时（请注意是数值的改变），可以使其产生过渡的动画效果，比如当元素的大小变动时，可以使用Transition将这个变动过程变得分平滑。

为了不影响其他不支持CSS3的浏览器（主要还是IE全系列），这个属性一般用在增强网站的体验上，而不是在菜单等主体位置使用它，否则版面可能会混乱（在其他浏览器下）。所以这个效果主要可以增强图片、文字的层次感。

基础知识

浏览器支持状况：

Chrome 2+(-webkit-transition)

Firefox3.7+(-moz-transition)

Safari 3.1+(-webkit-transition)

Opera 10.5+(-o-transition)

Transition对应的CSS属性列表：

transition-property
* 指定当元素哪个属性改变时执行Transition效果，属性可以时以下属性：none、all以及其他可以触发浏览器reflow或repaint的属性。
* 当指定为none时，动画立即停止，当指定为all的时候，则当元素产生任何属性值变化时都将执行“转换”效果，比如大小改变。
* 初始默认值为all.
transition-duration
* 指定“转换”过程的时间，如：1s、none。
* 初始默认值为0.
transition-timing-function
* 指定“转换”过程中可用的效果，预设的有：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默认值时easy。
* cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。

* 初始默认值为default.
transition-delay
* 指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行“转换效果”
* 初始默认值为0.

实例

可供变化的属性类型

background-color

颜色值

background-image

梯度

background-position

百分比, 长度值

border-bottom-color

颜色值

border-bottom-width

长度值

border-color

颜色值

border-left-color

颜色值

border-left-width

长度值

border-right-color

颜色值

border-right-width

长度值

border-spacing

长度值

border-top-color

颜色值

border-top-width

长度值

border-width

长度值

bottom

长度值, 百分比

color

颜色值

crop

角度值

font-size

长度值, 百分比

font-weight

数值

grid-*

various

height

长度值, 百分比

left

长度值,百分比

letter-spacing

长度值

line-height

数值, 长度值, 百分比

margin-bottom

长度值

margin-left

长度值

margin-right

长度值

margin-top

长度值

max-height

长度值, 百分比

max-width

长度值, 百分比

min-height

长度值, 百分比

min-width

长度值, 百分比

opacity

数值

outline-color

颜色值

outline-offset

数字

outline-width

长度值

padding-bottom

长度值

padding-left

长度值

padding-right

长度值

padding-top

长度值

right

长度值, 百分比

text-indent

长度值, 百分比

text-shadow

shadow

top

长度值, 百分比

vertical-align

keywords,长度值, 百分比

visibility

可视度

width

长度值, 百分比

word-spacing

长度值, 百分比

z-index

数字

zoom

数字