gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:11:13 26 4
gpt4 key购买 nike

我有一个包含一些幻灯片和菜单的 div。

#wrap {
position: relative;
top: 0;
transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}
<div id="wrap"></div>

谁能给我解释一下过渡属性在这里做什么?

我无法理解它将对 div 产生的影响。

最佳答案

回答你的问题

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

这意味着它将使用 top 属性进行动画处理!

效果:它会像 This Will Be the transition Effect 一样反弹


理解 CSS cubic-bezier

它有四个参数:

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

points cubucB

这些有什么作用?

Well, these map to points, and these points are part of a Bézier curve:

  • 所以有 4 个点,但是函数只提到了 P1 和 P2 及其对应的 X 和 Y 值?

  • 对于 CSS 贝塞尔曲线,P0 和 P3 始终位于同一位置。 P0 位于 (0,0),P3 位于 (1,1)。需要注意的重要一点是,在 cubic-bezier 函数中传递的点只能介于 0 和 1 之间。因此,如果您决定尝试类似 cubic-bezier(2,3,5,2) 的方法,你将被放逐到线性缓动,这是所有缓动函数中最糟糕的。这就像一个字体系列回到了 Comic Sans。

  • 另请注意,x 轴是动画所用的时间,y 轴是正在更改的属性。根据上图,您可以想象它在开始时迅速缓和,在中间减速,最后加速。



有用的链接


关于css - 了解 CSS 中的 cubic-bezier 过渡属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58498453/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com