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

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

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

解决方法

您可以使用

-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.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不会使用具有很多限制的三次曲线，而是使用计算出的关键帧。