如何在 css 变换动画中实现 easeOutBack 缓动答案

【问题标题】：How to implement easeOutBack easing in css transform animation如何在 css 变换动画中实现 easeOutBack 缓动
【发布时间】：2012-12-22 20:39:46
【问题描述】：

我正在处理一些 CSS 动画。但是我发现，CSS 过渡只支持跟随缓动功能。

轻松 |线性 |缓入 |缓出|轻松进出|三次贝塞尔曲线（）

我确实想在纯 css 的动画中使用像 easeOutBack 缓动这样的东西。我想用 webkit-animation 来做。但只有 safari 支持它。

easeOutBack 动作是一个动作物体将超出的地方边界并再次返回。有关不同运动功能的更多信息。你可以在下面看到这个链接。

http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html

有人建议如何在 css 变换动画中实现 easeOutBack 缓动？

【问题讨论】：

如果您解释easeOutBack 的含义可能会有所帮助。不是每个人都使用您所指的 jquery 模块。
对不起，我已经添加了一些解释。

标签： css easing

【解决方案1】：

您可以使用-webkit-animation-timing-function CSS 属性指定您自己的曲线。

函数的格式为cubic-bezier(P1x, P1y, P2x, P2y)，其中 P1 和 P2 是从 (0,0) 到 (1,1) 的三次贝塞尔曲线的两个中点。在你的情况下，你想要看起来像 -

EaseOutBack http://i56.tinypic.com/adg8yo.png

因此，您将在此曲线中指定的点是 - (0,0) 和 (0.2,1)。这使得曲线 - cubic-bezier(0,0,0.2,1)。

唉，webkit 三次曲线规范不允许动画超出 1,1 立方体的边界。因此，要根据需要实际为曲线设置动画，您需要添加一个额外的关键帧来指定“溢出”。

@-webkit-keyframes snapback {
    0% {
        -webkit-transform:translateX(0px);
    }
    60% {
        -webkit-transform:translateX(140px);
    }
    100% {
        -webkit-transform:translateX(100px);
    }
}

看看我拼凑的例子——http://jsfiddle.net/Heqs8/

【讨论】：

太棒了..我也尝试实现这样的动画。但仅限 webkit。我正在尝试破解 jquery 动画模块以支持 css3 转换。所以，我可以利用jquery计时功能+css变换来达到效果。
虽然动画确实越过了目标点并返回到目标点，但它只是 C0 连续的，看起来完全没有说服力。您想保持运动流畅，因此在第一段使用缓入，在第二段使用缓出，在最后一段使用缓入。
嗯——最后一个的缓进出局也不好看。它必须有一个很好的贝塞尔函数。

【解决方案2】：

看起来下面的代码会将easeOutBack动画添加到jQuery中，然后你应该可以使用它了。

jQuery.extend(jQuery.easing, {
    easeOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    }
});

从提到http://gsgd.co.uk/sandbox/jquery/easing/ 的http://jsfiddle.net/marcofucci/rRtAq/ 找到。

【讨论】：

谢谢。但我想使用纯 CSS 动画而不是 jquery。
用 jQuery 标签标记你的问题有点令人困惑。
标签不是我添加的。我会删除它。

【解决方案3】：

另一个替代方案是CSS3 Animation Generator，它启用了 W3C 规范不支持的 12 种缓动功能，包括后退缓动。 CSS3 动画生成器使用计算的关键帧，而不是使用有许多限制的三次曲线。

【讨论】：