Css “如何”；过渡计时功能：立方-贝塞尔（）&引用；物业工程

有人能解释一下“转换计时函数：立方贝塞尔（）；”的工作原理吗

这是我的密码

.sample_box{
    background-color: orange;
    height: 70px;
    width: 35%;
    transition: width 2s;
    transition-timing-function: cubic-bezier(0.1,0.1,0.8,3.0);
 }
.sample_box:hover{
    width: 100%;
}

• 我试着把2秒分成4个部分作为“立方贝塞尔”值，但我的盒子疯了，当它在两个方向上悬停时，它完全脱离了屏幕

---

您需要一点数学背景，才能真正深入地理解

立方贝塞尔函数，因为该函数定义了曲面的控制点。我不是数学专家，因此只能澄清其中的CSS部分。如果你真的需要关于如何绘制三次贝塞尔曲线的详细信息，那么在这里等着看你是否能得到更好的答案（或者）试着在math SE网站上询问哪个更适合这个问题

三次贝塞尔曲线是基于四个点P0、P1、P2和P3绘制的曲线。此处，点P0和P3是曲线的起点和终点，而P1和P2是用于定义曲线曲率的控制点

提供给
立方贝塞尔
定时功能的四个输入值指定立方贝塞尔曲线（）的控制点P1和P2的坐标。基于绘制的曲线（使用输入值），UAs将确定过渡或动画在任何给定时间点必须完成的进度

如图所示，x（参数1和3）的值应始终在0-1之间，而y（参数1和4）的值可能会超过此范围。以下是摘录：

两个x值必须在范围[0，1]内，否则定义无效。y值可能超过此范围

对于如何基于输入值绘制曲线以及如何显示任何给定时间点的进度的实时演示，您可以参考以下内容。它允许您更改图形上控制点的值，查看曲线如何基于它进行更改，还允许您查看曲线如何在实际过渡上工作的演示

为
立方贝塞尔（0.1,0.1,0.8,3.0）
绘制的曲线看起来像这样，正如您所看到的，使用此曲线，在过渡完成之前宽度超过100%，然后在结束时返回到100%（这是结束值），这是完全正常的。对于悬停，它将是相反的行为，因此在到达结束值之前，它将走另一条路（例如，您将看不到它，因为宽度不能小于0%，但您将在下面的第二条中看到它。）


.sample\u框{
背景颜色：橙色；
高度：70像素；
宽度：35%；
过渡：宽度2s；
过渡计时功能：立方贝塞尔（0.1,0.1,0.8,3.0）；
}
.示例框：悬停{
宽度：100%；
}
/*只是为了演示*/
分区集装箱{
高度：200px；
宽度：300px；
边框：1px实心；
保证金：0px自动；
}
.样本盒2{
背景色：番茄；
高度：70像素；
宽度：35%；
转换：翻译（0%，0%）；
转变：转变2s；
过渡计时功能：立方贝塞尔（0.1,0.1,0.8,3.0）；
}
.container.second:hover.sample\u box\u 2{
转换：翻译（100%，100%）；
}

谢谢你，哈里，我非常感谢你的帮助@arpappall21，不客气。如果有帮助，请考虑接受答案。接受不是强制性的，但接受表示您的问题已经解决。你可以在接受之前慢慢来，不必马上就接受：）顺便说一句@arpappall21，接受意味着点击答案左侧投票按钮下方的空心勾号。谢谢你记住我，我是这个网站的新手，但现在我不能给你投票，因为我需要更多的声誉：（感谢您的帮助：）