transition、cubic-bezier
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 );
可以在控制台调节控制点位置。