如何“transition-timing-function：cubic-bezier（）;”物业工程 [英] How "transition-timing-function:cubic-bezier();" property works

问题描述

有人可以解释一下transition-timing-function：cubic-bezier（）;

  .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％; 
} 
  

h2_lin>解决方案

您需要一些数学背景来深入了解立方贝塞尔函数，因为此函数定义控制点的立方贝塞尔曲线。我不是一个数学专家，所以只能澄清它的CSS部分。如果你真的需要如何绘制立方贝塞尔曲线的细节，然后等待看看你是否得到一个更好的答案在这里（或）尝试问一个数学SE网站，以更适合的问题。

立方贝塞尔曲线是基于四个点P0，P1，P2和P3绘制的曲线。这里，点P0和P3是曲线的开始点和结束点，而P1和P2是定义曲线曲率的控制点。

四个输入提供给立方贝齐尔定时函数的值指定立方贝塞尔曲线的控制点P1和P2的坐标（对于CSS使用的曲线，点P0和P3分别总是（0,0）和（1,1） ）。基于绘制的曲线（使用输入值），UA将确定转换或动画在任何给定时间点必须进行的进度量。

由于W3C规范中指定的 ， x（参数1和3）的值应始终在0 -1之间，而y（参数1和4）的值可以超过此范围。下面是提取：

这两个x值必须在[0，1]范围内或定义无效。

有关如何根据输入值绘制曲线的现场演示，以及如何显示在任何给定时间点的进度，您可以参考此创建的大页面作者：Lea Verou 。它允许您更改图表上的控制点的值，查看曲线如何根据它的变化，还可以看到该曲线如何在实际转换上工作的演示。

立方贝赛尔（0.1,0.1,0.8,3.0）绘制的曲线看起来像这，你可以看到这是完全正常的曲线，宽度超过100％之前转换完成，然后返回到100％（结束值）（结束值）。对于悬停出来，它将是相反的行为，所以它会走到另一个方式之前到达结束值（对于你的例子，你不会看到它，因为宽度不能低于0％，但你' ）

 。 sample_box {background-color：orange; height：70px;宽度：35％; transition：width 2s; transition-timing-function：cubic-bezier（0.1，0.1，0.8，3.0）;} sample_box：hover {width：100％;} / *仅适用于demo * / div.container {height：200px; width：300px; border：1px solid; margin：0px auto;}。sample_box_2 {background-color：tomato; height：70px;宽度：35％; transform：translate（0％，0％）; transition：transform 2s; transition-timing-function：cubic-bezier（0.1，0.1，0.8，3.0）;}。container.second：hover .sample_box_2 {transform：translate（100％，100％）;}  pre> 
 < div class ='container'> < div class ='sample_box'>< / div>< / div>< div class ='container second'> < div class ='sample_box_2'>< / div>< / div>  
 

Can someone please explain how exactly "transition-timing-function:cubic-bezier();" works please?

Here is my code

.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%;
}

• I've tried to break up the 2 seconds into 4 parts as "cubic-bezier" value but my box went insane, it goes completely out of the screen when hover in both directions

解决方案

You need a bit of math background to really understand in depth about the cubic-bezier function as this function defines the control points of a cubic-bezier curve. I am not a math expert and so can only clarify the CSS portion of it. If you really need details on how a cubic bezier curve is drawn then wait to see if you get a better answer here (or) try asking on one of the math SE sites whichever is better suited to the question.

A cubic-bezier curve is a curve that is drawn based on four points P0, P1, P2 and P3. Here the points P0 and P3 are the start and end points of the curve whereas P1 and P2 are the control points that go towards defining the curvature of curve.

The four input values that are supplied to the cubic-bezier timing function specify the coordinates of the control points P1 and P2 of the cubic bezier curve (for the curve used by CSS, the points P0 and P3 are always (0,0) and (1,1) respectively). Based on the curve that is drawn (using the input values), the UAs will determine the amount of progress the transition or the animation must have made at any given point in time.

As specified in the W3C Specs, the values for x (parameters 1 and 3) should always be between 0 -1 whereas the values for y (parameters 1 and 4) can exceed this range. Below is the extract:

Both x values must be in the range [0, 1] or the definition is invalid. The y values can exceed this range.

For a live demo of how the curve is drawn based on the input value and how that shows the progress at any given point in time, you can refer to this great page created by Lea Verou. It allows you to alter the values of the control points on the graph, see how the curve changes based on it and also allows you to see a demo of how that curve would work on an actual transition.

The curve that is drawn for cubic-bezier(0.1,0.1,0.8,3.0) would look like this and as you can see it is completely normal that with this curve, the width exceeds 100% before the transition is completed and then comes back down to 100% by the end (as that is the end value). For the hover out, it will be the reverse behavior and so it will go the other way before coming to the end value (for your example, you won't see it because width cannot be lower than 0% but you'll see it in the second one below.)

.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%;
}

/* just for demo */

div.container {
  height: 200px;
  width: 300px;
  border: 1px solid;
  margin: 0px auto;
}

.sample_box_2 {
  background-color: tomato;
  height: 70px;
  width: 35%;
  transform: translate(0%, 0%);
  transition: transform 2s;
  transition-timing-function: cubic-bezier(0.1, 0.1, 0.8, 3.0);
}
.container.second:hover .sample_box_2 {
  transform: translate(100%, 100%);
}

<div class='container'>
  <div class='sample_box'></div>
</div>

<div class='container second'>
  <div class='sample_box_2'></div>
</div>

这篇关于如何“transition-timing-function：cubic-bezier（）;”物业工程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！