css - 如何平滑三次贝塞尔曲线过渡

Question

我正在使用以下 CSS 转换:

cubic-bezier(0.16, 1, 0.29, 0.99)

问题在于，在动画结束时，元素的速度非常慢，以至于人眼可以看到各个帧。

这是一个演示问题的 jsfiddle: http://jsfiddle.net/vivmaha/xu7dzrbs/

上述问题有通用的解决方案吗？

例如，我可以同时指定立方贝塞尔曲线和最小速度吗？

Answer 1

我认为动画结束时明显的缓慢(即有时称为 jank )取决于您正在设置动画的 CSS 属性。

例如，如果 left 属性被动画化，那么 jank 将非常明显，但如果它被替换为 animates translateX on a transform property 的东西那么我想结果会顺利很多。

我相信 CSS Triggers 是一个很好的资源，因为它会告诉您哪些属性会触发布局、绘画，最后是合成。

除此之外，您可能需要向我们展示一个描述缓慢的演示。这样我们就可以更好地判断它是否与缓动曲线有关，或者它是否是您首先设置动画的属性的问题。

这是一个before和 after这个解决方案。