如何平滑三次贝塞尔过渡



我使用以下css过渡:

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

问题是,在动画的最后,元素的速度是如此之慢,以至于人眼可以看到单个帧。

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

对于上述问题是否有一个共同的解决方案?

例如,我可以同时指定三次贝塞尔和最小速度吗?

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

例如,如果是left属性被动画,那么jank-iness将是非常明显的,但如果它被transform属性上动画translateX的东西所取代,那么我认为结果会更平滑。

我相信CSS触发器是一个很好的资源,因为它告诉你哪些属性触发布局油漆和最后构图

除此之外,您可能需要向我们展示一个描述慢速的演示。这样我们就可以更好地判断它是与缓和曲线有关,还是与你首先要动画的属性有关。

这是解决方案的前后对比

相关内容

  • 没有找到相关文章

最新更新