不久前，我看到一个在width属性上使用立方贝塞尔曲线过渡的按钮。我真的很喜欢它的外观以及重新创建它的简单程度。

这是我制作的一个简单版本：https://codepen.io/Xemros/pen/oNNKjLm

<div class="container">
  <button>Hover me !</button>
</div>

button {
  outline:none;
  background-color: #ABCDFE;
  height: 70px;
  width: 200px;
  border-radius: 2em;
  border:0px;
  color:white;
  font-weight:800;
  font-size:18px;
  transition: width .5s cubic-bezier(0.68,-0.55,0.265,1.55),box-shadow .4s;
  box-shadow: 0px 4px 15px -4px rgba(0,0.35);
}

button:hover {
  width:250px;
}

这对我来说确实非常有效，但是我想更进一步。我想在三次贝塞尔曲线过渡中添加更多点以创建“稳定” 效果，因此最终的弹跳感更加自然。但是css函数仅采用4个参数，它们是两点的坐标。像这样：cubic-bezier（x1，y1，x2，y2）。

这是我用来测试参数的工具：https://cubic-bezier.com/#.68,1.55

这是一个绘制得不好的图，用来说明我希望过渡如何表现：https://i.stack.imgur.com/vKD6I.png

有人知道在CSS或JS / Jquery中实现此目标的简单方法吗？如果没有简单的方法，那么创建过渡的最有效方法是什么？