CSS3——过渡（transition）

一、概述

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

A：哪些属性需要过渡？

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

B：过渡多久完成？

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

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

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

D：多久后开始过度？

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

E：什么时候执行过渡？

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

综上所述如果把过渡作为一个类型的话，则：<过渡> = <property-list, duration, timing-function, delay>

二、语法

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

2.1 transition-property

2.1.1 介绍

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

2.1.2 语法

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

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

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

all：

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

非all的<single-transition-property>：

属性的名称标识符。

2.1.3 用法

A：

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

表示：with属性应用一个持续时间为1s的过渡，即<width, 1s, ease, 0s>

B：

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

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

C：

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

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

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

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

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

2.2 transition-duration

2.2.1 介绍

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

2.2.2 语法

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

2.2.3 用法

见2.1

2.3 transition-timing-function

2.3.1 介绍

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

1) 阶梯函数

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

2) 三次贝兹曲线

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

2.3.2 语法

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

1）CSS3预定义了一些常用的阶梯函数和贝兹曲线，见W3C。

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

2）自定义的阶梯函数：steps(<integer>[, [end| start]?])

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

3）自定义三次贝兹曲线：cublic-bezier(x1, y1, x2, y2)

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

2.3.3 用法【High】

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

2.4 transition-delay

2.4.1 介绍

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

2.4.2 语法

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

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

2.4.3 用法

A：

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

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

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

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

2.4.5 Issues/Concern

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

2.5 transition

2.5.1 介绍

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

2.5.2 语法

transition: <single-transition>[, <single-transition>]*
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

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

2.5.3 用法

A：

transition: none; 

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

transition: width 2s

表示： width属性应用一个持续2s的过渡，即<width, 2s, ease, 0s>

三、过渡的开始【？】

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

3.1 过渡过程中属性值发生变化

3.1.1：tansition系列属性值发生变化：

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

3.1.2：应用过渡的属性发生变化：

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

注意：

1. DOM元素CSS属性真实值是随着渐变过程动态变化的，渐变过程中获取元素的属性值：是当时渐变中的值（处于旧值和新值直接的一个值）。
2. 在插入元素（如 .appendChild()）或改变属性display: none后立即使用过渡, 元素将视为没有开始状态，始终处于结束状态。简单的解决办法，改变属性前用 window.setTimeout() 延迟几毫秒。

四、过渡事件

4.1 介绍

过渡完成后会触发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/