CSS3——过渡（transition）

摘要：表示任何属性都不应用过渡，并且可以终止正在执行的过渡。提供两种计算曲线阶梯函数三次贝兹曲线。在插入元素如或改变属性后立即使用过渡元素将视为没有开始状态，始终处于结束状态。过渡取消不会触发该事件。

CSS属性的值从一个值变成另一个值的过程叫做渐变，重点突出变化的过程。CSS3 transition系列属性可控制这个变化过程，使得属性值变化过程更加平滑。一个过渡应包含这几个属性：

A：哪些属性需要过渡？

需要过度的CSS属性（也就指定旧值和新值）

B：过渡多久完成？

持续时间，即从旧值变成新值的过程持续的时间。这个时间不包含延迟时间。

C：过渡中间值如何计算？

随着时间的推移，过渡过程中属性中间值计算方式。

D：多久后开始过度？

延迟多久开始过度，即从属性值改变到开始执行过渡的时间。

E：什么时候执行过渡？

当属性值发生变化时执行过渡。这个由浏览器控制，不需要作者控制。

综上所述如果把过渡作为一个类型的话，则：<过渡> =

CSS3通过tansition系列属性（transition-property, transition-duration, transition-timing-function, transition-delay，transition）控制过渡。

用来指定哪些CSS属性应用过渡，多个属性用逗号隔开。

transition-property: none |  [, ]*
 = all | 
默认值：all

从语法中可以看到transition-property的取值要么是none要么是列表。两种值不同共存的，并且"inherit","initial"也不能和列表共存。
none：

表示任何属性都不应用过渡，并且none可以终止正在执行的过渡。

all：

表示所有可动画的属性都应用过渡。注意all关键字是一种特殊的，他是表示所有属性的简洁写法。所以他可以和其他属性名共存，但是最好不要这样做。

非all的：

属性的名称标识符。

A：

transition-property: width;
transition-duration: 1s;

表示：with属性应用一个持续时间为1s的过渡，即

B：

transition-property: width, background-color;
transition-duration: 1s, 2s;

表示：
with属性应用一个持续时间为1s的过渡，即
background-color属性应用一个持续时间为2s的过渡，即

C：

transition-property: width, background-color, height;
transition-duration: 1s,2s;

表示：
with属性应用一个持续时间为1s的过渡，即
background-color属性应用一个持续时间为2s的过渡，即
height属性应用一个持续时间为1s的过渡，即

注意：
该例中并没有显示指定height属性过渡持续时间。如果transition-property属性指定值个数多于tansition-duration属性（transition-timing-function, transition-delay也是这样）指定的值个数，则会循环重复tansition-duration的值，即此例中transition-duration的值等价于：transition-duration: 1s, 2s, 1s。如果transition-duration的值指定的值个数多于transition-property属性指定值格式，则多于的被忽略。
D：

transition-property: width, heighttt, background-color;
transition-duration: 1s, 1.5s, 2s;

表示：
with属性应用一个持续时间为1s的过渡，即
heighttt属性（虽然该属性heighttt）应用一个持续时间为1.5s的过渡，即< heighttt, 1s, ease, 0s>
background-color属性应用一个持续时间为2s的过渡，即
注意：
该例中有个非法属性heighttt。tansition-property属性列表中包含非法属性或者非动画的属性也是会创建个过渡，同理也会占用tansition-duration指定的值列表的一个值。
E：

transition-property: width, all, background-color;
transition-duration: 2s, 5s, 0.5s;

表示：所有可动画的属性应用一个持续5s的过渡，即
注意：
该例中all和其他属性同存。all关键字会导致其他指定的属性被忽略，并且根据all的位置相应的确定过渡其他值。如该例中all在第二个位置，所以对应的持续时间是5s.

定义过渡的持续时间，即从过渡开始到过渡结束的时间。

transition-duration:  [, ]*
默认值：0s

见2.1

指定过渡过程中属性中间值的计算方式。CSS3提供两种计算曲线：阶梯函数（stepping function), 三次贝兹曲线（cubic-beizer）。

阶梯函数由两部分构成（见W3C）：
步数：步数是通过一个整数指定，并且每步的时间长度一样（即把持续时间等分，并且输出值也是等分的）
什么时间改变值：指定在每步的什么时间点改变值，只支持两个时间点：每步的开始和每步的结束。

CSS3提供的三次贝兹曲线由四个点构成（P0-P3)，其中P0（0，0）， P3(1,1)是固定的。作者只能控制p1,p2点的位置来控制贝兹曲线。

transition-timing-function: [, ]*
 = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)
x1,y1, x2, y2 = 

ease: 平滑（先加速（加速时间短），后减速）
linear: 线性
ease-in: 加速
ease-out: 减速
ease-in-out: 先加速，后减速（加速、减速时间相等）

通过steps函数可以自定义阶梯函数，参数1指定步数，参数2指定改变值的时间点。start表示在每步的开始改变值，end表示在每步的结束改变值。参数2是可选的，缺省时取值end。

通过cublic-bezier函数自定义三次贝兹曲线。指定p1, p2点位置（p0, p3是固定值），其中x轴的取值范围只能是[0, 1]，而y轴的取值不受限制。更好了查看贝兹曲线效果参考http://cubic-bezier.com/

见参考Understanding CSS Timing Functions，里面列举了各种举例。

指定过渡延迟执行的时间，即从DOM元素CSS属性值发生变化（赋值个新目标值）到DOM元素开始执行过渡之间的时间。

transition-delay: [, ]*
默认值：0s

延迟时间可以为负值，为负值时会立马执行过渡（就像没有延迟一样），但是起始值是过渡执行一段时间（延迟时间的绝对值）时的值。换句话说，负值延迟时间X表示当属性值发生变化时延迟已经在X时间前完成了，并且已经执行过渡X时间了。实际用户看到的过渡时间比实际执行事件少了X事件。比如-2s，表示在属性值发生变化时已经执行过渡2s了，并且当前的属性的起始值应该是执行过渡2s时的值。

A：

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: .5s;

表示：
width属性应用一个持续1s, 延迟0.5s，时间函数为linear的过渡，
B:

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: -.5s; /* 延迟时间为负值 */

表示：
width属性应用一个持续1s, 延迟-0.5s，时间函数为linear的过渡，，用户体验的过渡时间应该是0.5s.

A：负值延迟时间会影响实际过渡执行的时间。

transition是其他transition-属性的简洁方式。

transition: [, ]*
 = [ none |  ] ||  ||  || 

注意在tansition属性中有两个类型的值（持续时间，延迟时间），规定前面的时间是持续时间，后面的表示延迟时间。

A：

transition: none; 

表示：所有属性都不应用过渡，等价于transition-property: none;
B：

transition: width 2s

表示： width属性应用一个持续2s的过渡，即

当一个可动画的属性的计算值发生变化时，浏览器就根据tansition系列属性的值决定给该属性应用什么样的过渡。

过渡过程中tansition属性发生变化并不会影响本次过渡，除了tansition-property的none取值（会终止当前过渡）

终止当前过渡，并根据新的值应用一个新的过渡。

DOM元素CSS属性真实值是随着渐变过程动态变化的，渐变过程中获取元素的属性值：是当时渐变中的值（处于旧值和新值直接的一个值）。

在插入元素（如 .appendChild()）或改变属性display: none后立即使用过渡, 元素将视为没有开始状态，始终处于结束状态。简单的解决办法，改变属性前用 window.setTimeout() 延迟几毫秒。

过渡完成后会触发TransitionEvent事件。过渡取消不会触发该事件。

var transitionProperty = (function() {
            var t,
                el = document.createElement("surface"),
                transitions = {
                    "transition": {
                        eventName: "transitionend",
                        cssName: "transition"
                    },
                    "OTransition": {
                        eventName: "oTransitionEnd",
                        cssName: "-o-transition"
                    },
                    "MozTransition": {
                        eventName: "transitionend",
                        cssName: "-moz-transition"
                    },
                    "WebkitTransition": {
                        eventName: "webkitTransitionEnd",
                        cssName: "-webkit-transition"
                    }
                }

            for(t in transitions){
                if( el.style[t] !== undefined ){
                    return transitions[t];
                }
            }
        })()

哪些属性可以应用transition：只能是可动画的CSS属性可以应用。

见：
http://caniuse.com/#search=tr...
https://developer.mozilla.org...

W3C： https://www.w3.org/TR/css3-tr...
MDN：https://developer.mozilla.org...
W3C+：http://www.w3cplus.com/conten...
cubic-beizer详解：http://www.candoudou.com/arch...
Understanding CSS Timing Functions【High】：https://www.smashingmagazine....
【工具】
缓动函数（更直观的查看过渡动画）：http://easings.net/zh-cn
在线绘制贝兹曲线【High】：http://cubic-bezier.com/