CSS3中的transition详解

Transition是CSS3中新添加的特性，不知道翻译成什么叫法更好听一点，暂且叫做“转换”吧，即当元素在大小、颜色、布局、透明度等数值改变时（请注意是数值的改变），可以使其产生过渡的动画效果，比如当元素的大小变动时，可以使用Transition将这个变动过程变得分平滑，可以增强网站的体验。

Transition对应的CSS属性列表：

transition-property

1. 指定当元素哪个属性改变时执行Transition效果，属性可以时以下属性：none、all以及其他可以触发浏览器reflow或repaint的属性。
2. 当指定为none时，动画立即停止，当指定为all的时候，则当元素产生任何属性值变化时都将执行“转换”效果，比如大小改变。
3. 初始默认值为all.

transition-duration

1. 指定“转换”过程的时间，如：1s、none。
2. 初始默认值为0.

transition-timing-function

1. 指定“转换”过程中可用的效果，预设的有：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默认值时easy。
2. cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。
3. 初始默认值为default.

transition-delay

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

属性值连写（短属性）

1. transition和background等CSS属性一样支持属性值连写，比如：-webkit-transition: width 1s easy-in-out;
2. 需要值得注意的是，原则上所有属性值是不区分位置的，但是“时间属性值”有点不同，浏览器会根据先后顺序决定，第一个可以解析为时间的属性值将体现为transition-duration，第二个可以解析为时间的属性值将体现为transition-delay

浏览器支持状况？

• Chrome 2+(-webkit-transition)，Firefox3.7+(-moz-transition)，Safari 3.1+(-webkit-transition)，Opera 10.5+(-o-transition)，其他浏览器暂不支持

Reflow和Repaint？

• Transition执行过程中，同样会产生大量的Reflow和Repaint，不过不同的是，这些变化都有一定是按照CSS中定义的运作方式规律的进行，所以浏览器可以预知整个过程的Reflow和Repaint过程，从而对其进行优化处理。(个人猜测，这需要查看webkit源码后再作结论)

正确理解Timing-function

• 这是几个Timing-function曲线图：

这是几个默认timing-function的示例：(请在chrome浏览器下产看效果)

default ?

linear ?

ease-in ?

ease-out ?

ease-in-out ?

cubic-bezier ?

一次“转变”便是一次曲线过程

激发Transition的条件

• 只要为元素指定任意一个以上的transition属性，元素在改变属性值的时候便可执行transition效果，并设其他属性值为初始值。

如果我们把下面的例子（transition:color 1s ease-in;），我们改变了字体颜色的持续时间为1秒）。请参阅下面的一些例子，可以应用到你自己的项目中使用。
css3颜色过渡范例

.my_class {
transition: color .5s ease-in;
-moz-transition: color .5s ease-in;
-o-transition: color .5s ease-in;
-webkit-transition: color .5s ease-in;
}
.my_class:hover {
color:#066;
}
可以用作：创建链接和按钮的鼠标悬停时候的效果。

把鼠标移过来看看效果

当前前端

css3运动过渡范例

.my_class {
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.my_class:hover {
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}

这可以被用来创建更具交互性的网站，如菜单项或图片廊，等。

最后加上原文的链接： http://www.dqqd.me/css3-transition.html