css3 transition属性详解（转）

Transition包含四个子属性，分别为property、duration、timing-function、delay。 1. transition-property: property针对了当前选择器的某个css属性进行设置。比如我要过渡一个背景色时，则设置property值为background。 2. transition-duration: duration针对了过渡效果的持续时间。 3. transition-timing-function: timing-function算是Transition属性中最为复杂的一个了。它针对了过渡效果的特效，有多种特效展示。这里得涉及到一个学术性的话题：貝茲曲線。说实话，我也没搞的太明白，但W3C给出了一张曲线图，一看就明白了（后附图）。 介绍下预留的几个特效： ease: cubic-bezier(0.25, 0.1, 0.25, 1.0) linear: cubic-bezier(0.0, 0.0, 1.0, 1.0) ease-in: cubic-bezier(0.42, 0, 1.0, 1.0) ease-out: cubic-bezier(0, 0, 0.58, 1.0) ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0) cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1] 其中的cubic-bezier即为貝茲曲線中的绘制方法。先来看图：图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。 参考阅读： W3C: http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag 貝茲曲線：http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A 4. transition-delay: duration针对了过渡效果的延迟执行时间。 5. 代码演示： 1). 过渡单个属性： [...]