了解CSS中的cubic-bezier过渡属性

Question

我有一个__CODE__包含一些幻灯片和菜单.

#wrap {
    position: relative;
    top: 0;
    transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}

下面是我的CSS的__CODE__.

<div id="wrap"></div>

任何人都可以解释一下过渡房产在这里做了什么？.

我无法理解它在div上产生的影响.

Answer 1

回答你的问题

该属性用于动画<div id="wrap"></div>.

这意味着它将使用顶级属性进行动画制作!

而对于效果:它会弹跳,就像这将是过渡效果

它需要四个参数:

cubic-bezier(P1x,P1y,P2x,P2y)

cubucB

好吧,这些映射到点,这些点是Bézier曲线的一部分:

所以有4个点,但是这个函数只提到了P1,P2和它们对应的X和Y值？
对于CSSBézierCurves,P0和P3总是在同一个位置.P0为(0,0),P3为(1,1).需要注意的一点是,在cubic-bezier函数中传递的点只能在0和1之间.因此,如果你决定尝试类似的东西cubic-bezier(2,3,5,2),你将被放逐到线性缓动,这是所有缓动函数中最差的.这就像一个字体家族回归Comic Sans.
另请注意,x轴是动画所用的时间,y轴是要更改的属性.根据上图,您可以在开始时快速显示缓和,在中间放慢速度,最后加快速度.