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

发布于 2024-11-02 03:57:19 字数 493 浏览 3 评论 0原文

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

轻松|线性|缓入|缓出 |缓入缓出 | cubic-bezier()

我确实想在带有纯css的动画中使用类似easeOutBack缓动的东西。我正在考虑用 webkit 动画来做到这一点。但只有 safari 支持。

easeOutBack 动作是一个动作物体将超出的地方边界并再次返回。有关不同运动函数的更多信息。您可以在下面看到此链接。
http://hosted.zeh.com。 br/tweener/docs/en-us/misc/transitions.html

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

℡寂寞咖啡 2024-11-09 03:57:19

您可以使用 -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/

You can specify your own curve with the -webkit-animation-timing-function CSS property.

The format of the function is cubic-bezier(P1x, P1y, P2x, P2y) where P1 and P2 are the two middle points of a cubic bezier curve from (0,0) to (1,1). In your case you want something that looks like -

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

So the points you would specify in this curve are - (0,0) and (0.2,1). This makes the curve - cubic-bezier(0,0,0.2,1).

Alas, the webkit cubic curve specification does not allow the animation to exceed the bounds of 1,1 cube. So to actually animate the curve as desired you need to add an extra keyframe that specifies the 'overflow'.

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

Take a look at the example I threw together - http://jsfiddle.net/Heqs8/

回复收藏 0 原文

活雷疯 2024-11-09 03:57:19

看起来下面的代码会将 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://jsfiddle.net/marcofucci/rRtAq/ 找到，其中提到 http://gsgd.co.uk/sandbox/jquery/easing/。

Looks like the following code will add the easeOutBack animation to jQuery, and then you should be able to use it.

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;
    }
});

Found from http://jsfiddle.net/marcofucci/rRtAq/ which mentions http://gsgd.co.uk/sandbox/jquery/easing/.

回复收藏 0 原文