transition过度动画

通过过度transition，可以让web前端开发人员不需要javacript就可以实现简单的动画交互效果。
transition-property:过度属性，默认值all
transition-duration:过度持续时间
transiton-timing-function:过度函数，默认值为ease函数
transition-delay:过度延时时间，默认值0s

过度属性
transition-property
值: none | all | <transition-property>[,<transition-property>]*
初始值: all
应用于: 所有元素
继承性: 无
（none: 没有指定任何样式
all: 默认值，表示指定元素所有支持transition-property属性的样式
<transition-property>: 可过渡的样式，可用逗号分开写多个样式）
可过渡的样式
　　不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果
Vstart = 开始值; Vend = 结束值; Vres = 中间值; p = 过渡函数的输出值
Vres = (1 - p) * Vstart + p * Vend
当Vres具有有效值时，则该CSS样式可过渡


过渡持续时间
transition-duration
值: <time>[,<time>]*
初始值: 0s
应用于: 所有元素
继承性: 无
[注意]该属性不能为负值
[注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位
[注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间
DEMO中的过渡属性值
transition-property: width,background;


过渡延迟时间
　该属性定义元素属性延迟多少时间后开始过渡效果，该属性的单位是秒s或毫秒ms
transition-delay
值: <time>[,<time>]*
初始值: 0s
应用于: 所有元素
继承性: 无
[注意]该属性若为负值，无延迟效果，但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0，则无过渡效果；若该设定值大于0，则过渡元素从该设定值开始完成剩余的过渡效果

过渡时间函数
过渡时间函数用于定义元素过渡属性随时间变化的过渡速度变化效果
transition-timing-function
值: <timing-function>[,<timing-function>]*
初始值: ease
应用于: 所有元素
继承性: 无
取值
过渡时间函数共三种取值，分别是关键字、steps函数和bezier函数
steps函数
steps步进函数将过渡时间划分成大小相等的时间时隔来运行
steps步进函数为
steps(<integer>[,start | end]?)
<integer>:用来指定间隔个数(该值只能是正整数)
第二个参数: 该参数可选，默认是end，表示开始值保持一次；若参数为start，表示开始不保持