【问题标题】:How to smoothen a cubic bezier transition如何平滑三次贝塞尔曲线过渡
【发布时间】:2015-10-27 00:59:31
【问题描述】:

我正在使用以下 css 转换:

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

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

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

上述问题有没有通用的解决方案?

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

【问题讨论】:

    标签: css css-transitions


    【解决方案1】:

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

    例如,如果动画是left 属性,那么 jank-iness 将非常明显,但如果它被替换为 animates translateX on a transform property 的东西,那么我认为结果会更顺畅。

    我相信 CSS Triggers 是一个很好的资源,因为它告诉你哪些属性触发了 layoutpaint 和最后 作曲。

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

    这是此解决方案的beforeafter

    【讨论】:

    • 成功了。也感谢 CSS 触发器链接,我将来会使用它。我已经用 jsfiddles 编辑了你的答案,供人们比较之前和之后。
    猜你喜欢
    • 1970-01-01
    • 2011-03-10
    • 2012-07-27
    • 2012-01-19
    • 2016-10-05
    • 2011-05-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多