如何在CSS转换动画中实现easyOutBack缓动

|| 我正在使用一些CSS动画。但是我发现，CSS过渡仅支持以下缓动功能。缓解线性|缓解缓和|轻松进出|三次贝塞尔曲线我确实想在纯CSS中使用诸如easyOutBack缓动之类的动画。我正在考虑通过Webkit动画来实现。但是只有野生动物园支持它。 easeOutBack运动是运动物体将超出边界并返回。有关不同运动功能的更多信息。您可以在下面看到此链接。 http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html 有人建议如何在CSS转换动画中实现easyOutBack缓动吗？

已邀请:

3 个回复

臂哦

您可以使用-webkit-animation-timing-functionCSS属性指定自己的曲线。函数的格式为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立方体的范围。因此，要根据实际需要对曲线进行动画处理，您需要添加一个额外的关键帧来指定\'overflow \'。

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

看一下我放在一起的示例-http://jsfiddle.net/Heqs8/

雄鞋谋塘

看起来以下代码会将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/。

辟官陡板休

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

要回复问题请先登录或注册

如何在CSS转换动画中实现easyOutBack缓动

3 个回复

发起人

css

easing

css3

问题状态

如何在CSS转换动画中实现easyOutBack缓动

与内容相关的链接

3 个回复

发起人

css

easing

css3

问题状态