在我的 css 代码中使用这个 cube-bezier(0.52,-1.59, 0.85, 3.63) 函数时没有得到我想要的输出

Question

我的代码片段如下：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width:100px; height: 100px; margin:0 auto; background-color:red; margin-top:5%; transition-property: all; transition-duration:10s; transition-timing-function:cubic-bezier(0.52,-1.59, 0.85, 3.63); } .box:hover{ width:500px; height:500px; } </style> </head> <body> <div class="box"></div> </body> </html>

正如你在代码片段中看到的，我使用了这个“cubic-bezier(0.52,-1.59,0.85,3.63)”函数。 这个函数给了我以下曲线：在此处输入图像描述我假设我的曲线输出是 - 首先，在开始时它将减小框（div 类名称）的宽度，然后在接近结束时，它会增加超出其实际大小的大小。但结果我发现了一些与我的假设不同的东西。

Answer 1

悬停有问题。

如果您运行此代码段，这与问题中的相同，但持续时间为 100 秒而不是 10 秒，您将看到最初正方形根据需要缩小，但它到达了重点（取决于光标所在的位置）到正方形），光标在正方形之外结束。

这意味着它不再悬停，因此方块返回到其初始大小，此时光标再次悬停，因此重复过渡。 因此产生了脉冲效应。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width:100px; height: 100px; margin:0 auto; background-color:red; margin-top:5%; transition-property: all; transition-duration:100s; transition-timing-function:cubic-bezier(0.52,-1.59, 0.85, 3.63); } .box:hover{ width:500px; height:500px; } </style> </head> <body> <div class="box"></div> </body> </html>

解决这个问题的一种方法是保持实际正方形的大小恒定，因此悬停不会离开它，并将变换放在具有红色的 after 伪元素上，而正方形本身是透明的。 这样，悬停光标会保持在方块内，您就不会得到脉冲效果。

下面是一个例子：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width:100px; height: 100px; margin:0 auto; background-color:transparent; margin-top:5%; position: absolute; } .box::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: red; transition-property: all; transition-duration:10s; transition-timing-function:cubic-bezier(0.52,-1.59, 0.85, 3.63); } .box:hover::after{ width:500%; height:500%; } </style> </head> <body> <div class="box"></div> </body> </html>