[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，用关键帧完成动效会是更好的选择。