其他分享
首页 > 其他分享> > transition、cubic-bezier

transition、cubic-bezier

作者:互联网

transition

transition
transition:<single-transition>[,<single-transition>]*

<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

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

取值:

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

标签:检索,1s,bezier,1.0,cubic,ease,transition,贝塞尔
来源: https://www.cnblogs.com/zhizhi0810/p/10993496.html