本文已参与「新人创作礼」活动，一起开启掘金创作之路。
transition
transition属性是 [transition-property]，[transition-duration]，[transition-timing-function]和 [transition-delay]的一个[简写属性]。
过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 [:hover]。
1. transition-property
/* 指定应用过渡属性的名称 */
- all （默认值）所有可被动画的属性都表现出过渡动画。
- IDENT 属性名称。 transition-property: width, height, color;
- none 没有过渡动画
2. transition-duration
/* 以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画 */
- time 表示过渡属性从旧的值转变到新的值所需要的时间。
如果时长是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。
# Nodes: 可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。
如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。
3. transition-timing-function
/* 变化过程曲线 */
属性值：
1、ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier： 贝塞尔曲线
7、step-start：等同于steps(1,start)
step-end：等同于steps(1,end)
steps(<integer>,[start|end])
第一个参数：必须为正整数，指定函数的步数
第二个参数：指定每一步的值发生变化的时间点（默认值end）
# Nodes: 如果timing function的个数比主列表中数量少，缺少的值被设置为初始值（ease）。
如果timing function比主列表要多，timing function函数列表会被截断至合适的大小。
这两种情况下声明的CSS属性都是有效的。
4. transition-delay
/* 在过渡效果开始作用之前需要等待的时间 */
- time 值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。
取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
# Nodes: 可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性
（transition-property）。如果指定的时长个数小于属性个数，那么时长列表会重复。
如果时长列表更长，那么该列表会被裁减。
# Nodes: 超出的情况下是会被全部截掉的不够的时候，关于时间的会重复列表，
transition-timing-function的时候使用的是默认值ease
5. transitionend 事件
当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend,在 WebKit 下是 webkitTransitionEnd（每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件）在transition完成前设置 display: none，事件同样不会被触发
6. transition
/* 简写属性 */
- transition-property transition-duration transition-timing-function transition-delay
过渡属性 过渡持续时间 过渡时间曲线 等待多长时间开始过渡
# Nodes: 可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔
