transition
概要：定义元素两个不同状态间的过渡效果
Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.
语法：<single-transition>#
--where
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>
--where
<single-transition-property> = all | IDENT
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
示例：
/* Apply to 1 property */
/* property name | duration */
transition: margin-left 4s;
/* property name | duration | delay */
transition: margin-left 4s 1s;
/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-left 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
/* Global values */
transition: inherit;
transition: initial;
transition: unset;
Properties
transition-delay
概要：transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。
说明：值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性（transition-property）
语法：transition-delay: <time>#
示例：
/* <time>值 */
transition-delay: 3s;
transition-delay: 2s, 4ms;
/* 全局变量 */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;
transition-duration
概要：transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。
说明：可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。
语法：transition-duration: <time>#
值：<time>
<time> 类型。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。
示例：
/* <time> 值 */
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;
/* 全局值 */
transition-duration: inherit;
transition-duration: initial;
transition-duration: unset;
transition-property
概要：transition-property 指定应用过渡属性的名称。
说明：如果指定简写属性（比如 background），那么其完整版中所有可以动画的属性都会被应用过渡。
语法：transition-property: none | <single-transition-property>#
where
<single-transition-property> = all | IDENT
值：
none
没有过渡动画。
all
所有可被动画的属性都表现出过渡动画。
IDENT
属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。
transition-timing-function
概要：CSS属性受到 transition effect的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。
实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。
这条加速度曲线被<timing-function>所定义，之后作用到每个CSS属性的过渡.
你可以规定多个timing function,通过使用 transition-property属性，可以根据主列表(transition property的列表)给每个CSS属性应用相应的timing function.
如果timing function的个数比主列表中数量少，缺少的值被设置为初始值（ease） 。如果timing function比主列表要多，timing function函数列表会被截断至合适的大小。这两种情况下声明的CSS属性都是有效的。
语法：transition-timing-function: <timing-function>#
值：<timing-function>
通过transition-property中定义被过渡属性，每个 <timing-function>的值代表与这个属性相对应的timing function.
示例：
transition-timing-function: ease
transition-timing-function: ease-in
transition-timing-function: ease-out
transition-timing-function: ease-in-out
transition-timing-function: linear
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
transition-timing-function: step-start
transition-timing-function: step-end
transition-timing-function: steps(4, end)
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
transition-timing-function: inherit
