CSS3 Transition详解

CSS3 Transition详解

Transition是CSS3中新添加的特性，不知道翻译成什么叫法更好听一点，暂且叫做“转换”吧，即当元素在大小、颜色、布局、透明度等数值改变时（请注意是数值的改变），可以使其产生过渡的动画效果，比如当元素的大小变动时，可以使用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.

以上属性可看下面这个demo（如果无法看到效果，请更换你的浏览器）：

随机更改高度和宽度设定transition为none

这是一个参照物

深度问题挖掘

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

default »

linear »

ease-in »

ease-out »

ease-in-out »

cubic-bezier »

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

激发Transition的条件
* 只要为元素指定任意一个以上的transition属性，元素在改变属性值的时候便可执行transition效果，并设其他属性值为初始值，详见上述属性列表。看这个demo：

鼠标移动到元素上方可观察变化效果

<div style="-webkit-transition-duration:2s; width:300px; padding:10px;border: 2px solid #ccc; background:#a01000;color:#fff;"onmouseover="this.style.width='500px';"onmouseout="this.style.width='300px';">鼠标移动到元素上方可观察变化效果</div>

* 值得注意的是，本文不止一次提到，是当“属性值”改变时才会激发 transition效果，而不是所有“元素外观”的改变都会激发的，比如设定元素的宽度为百分比，然后改变浏览器大小，元素大小在改变的同时并未发现由transition的效果呈现。请看这两个demo。
————————————–邪恶的补充线——————————————

实践中还发现，当元素Layout不可见即display为none时，操作元素为block的同时操作其他可transition属性时，无法激发 transition效果。解决办法为，先将元素设为block（或其他可见值），再setTimeout(function(){ /**属性改变代码**/ }, 0)，将transition操作提到js操作队列最后执行。//2010-06-01

收尾

嗯，transition就研究到这里吧，文章中有些只是个人臆测的结论，请不要盲目相信，随后我将继续扫一遍webkit中关于 transition的源码再给出结论。

 

转载自：http://imethan.com/?p=236