了解CSS中的三次贝塞尔曲线过渡属性 [英] Understanding cubic-bezier transition property in CSS

问题描述

我有一个div，其中包含一些幻灯片和菜单.

I have a div which contains a some slides and menu.

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

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

有人可以向我解释一下过渡属性在这里做什么吗?

Can anyone explain to me what the transition property does here?

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

I am not able to understand the effect it's going to produce on the div.

推荐答案

回答您的问题

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

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

It means it will animate using top property!

为了效果:它将像 成为过渡效果

And for Effect: It will Bounce like This Will Be the transition Effect

它带有四个参数:

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

好吧，这些映射到点，这些点是贝塞尔曲线的一部分:

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

• 所以有4个点，但是该函数仅提及P1和P2及其相应的X和Y值?

  • So there are 4 points, but the function only mentions P1, and P2 with their corresponding X and Y values?

    对于CSS贝塞尔曲线，P0和P3始终位于同一位置. P0为(0,0)，P3为(1,1).需要注意的重要一点是，三次方贝塞尔函数中传递的点只能在0到1之间.因此，如果您决定尝试使用cubic-bezier(2,3,5,2)之类的方法，则会被放逐到线性宽松，这是最糟糕的情况.所有缓动功能.就像是回溯到Comic Sans的字体家族.

    For CSS Bézier Curves, P0 and P3 are always in the same spot. P0 is at (0,0) and P3 is at (1,1). An important thing to note is that the points that get passed in the cubic-bezier function can only be between 0 and 1. So if you decide to try something like cubic-bezier(2,3,5,2), you’ll be banished to linear easing, the worst of all easing functions. That’s like a font-family falling back to Comic Sans.

    还要注意，x轴是动画花费的时间，y轴是要更改的属性.根据上面的图表，您可以直观地看到它从一开始就快速放松，在中间放慢速度，在结束时加快速度.

    Also notice that the x-axis is the time the animation takes, and the y-axis is the property being changed. Based on the graph above you can visualize it easing quickly in the beginning, slowing down in the middle, and picking up speed at the end.

    • 此博客的答案来源

    用于创建贝塞尔曲线过渡

    立方贝塞尔曲线生成器

    理解曲线-数学

    这篇关于了解CSS中的三次贝塞尔曲线过渡属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！