[10 MINS/DAY] CSS Transition

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可让属性变化成为一个持续一段时间的过程，而不是当即生效的。好比，将一个元素的颜色从白色改成黑色，一般这个改变是当即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照必定的曲线速率变化。这个过程能够自定义。
transition = transition-property + transition-duration + transition-timing-function + transition-delay

• transition-property

指定应用过渡属性的名称。可用属性列表https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
none : 没有过渡动画。
all : 全部可被动画的属性都表现出过渡动画。
IDENT : 属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。

• transition-duration

<time>类型。表示过渡属性从旧的值转变到新的值所须要的时间。若是时长是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。(单位s或者ms)

• transition-timing-function

<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?) 
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

• transition-delay

规定了在Transition开始做用以前须要等待的时间。值以秒（s）或毫秒（ms）为单位，代表Transition将在什么时候开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会致使过渡当即开始。

Transition VS Animation
Transition能够从一个状态平滑地过渡到另外一个状态，而Animation能够作一系列更复杂的运动。Transition通常更易被建立和管理，并适用于大部分状况。若是你须要对一个元素有更高的控制程度，那就能够作一系列的Animation步骤；或者当须要在开始加载时就出现Animation，用关键帧完成动效会是更好的选择。