transition
- transition 检索或设置对象变换时的过渡效果
- transition-property 检索或设置对象中的参与过渡的属性
- transition-duration 检索或设置对象过渡的持续时间
- transition-timing-function 检索或设置对象中过渡的类型
- transition-delay
transition
transition：<single-transition>[,<single-transition>]*
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>
<' transition-property '>：
检索或设置对象中的参与过渡的属性<' transition-duration '>：
检索或设置对象过渡的持续时间<' transition-timing-function '>：
检索或设置对象中过渡的动画类型<' transition-delay '>：
检索或设置对象延迟过渡的时间
transition: transition-property transition-duration transition-timing-function transition-delay;
缩写：
transition:
border-color .5s ease-in .1s,
background-color .5s ease-in .1s,
color .5s ease-in .1s;
拆分
transition-property: border-color, background-color, color;
transition-duration: .5s, .5s, .5s;
transition-timing-function: ease-in, ease-in, ease-in;
transition-delay: .1s, .1s, .1s;
transition-timing-function
取值：
linear：
线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)ease：
平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)ease-in：
由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)ease-out：
由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)ease-in-out：
由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)step-start：
等同于 steps(1, start)step-end：
等同于 steps(1, end)steps(<integer>[, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
cubic-bezier
transition: all 1s cubic-bezier(0,0,1,1);
(x,y)(x,y)
第一个控制点 第二个控制点
y值可正可负，为负时，速度先为负后为正，y为负，斜率也就为负值，所以小球先退后一点再加速前进。
x轴只能为正[0,1]之间。
峰值曲线，越尖，速度越快；越平缓，速度越慢。
（x,y,x,y）
y轴差值越少，越短促有力一点；
y轴可正可负，负回退正前进；
B(t) = P₀(1 - t)³ + 3P₁t(1 - t)² + 3P₂t²(1 - t) + P₃t³ ,t ∈ [0,1]
起点 控制点1 控制点2 终点
贝塞尔曲线，就是取两点之间的斜率，k = f＇( x )；
可以在控制台调节控制点位置。