5

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

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

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

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

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

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

4

3 回答 3

9

-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/

于 2011-05-20T19:20:07.437 回答
1

看起来下面的代码会将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/中找到。

于 2011-04-18T10:06:01.037 回答
1

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

于 2012-05-16T17:01:09.073 回答