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

Question

我正在使用一些CSS动画.但我发现,CSS过渡仅支持缓动功能.

轻松| 线性| 安慰| 缓和| 易于进出| 立方贝塞尔()

我想在纯css的动画中使用像easOutBack缓动的东西.我想用webkit动画来做.但只有safari支持它.

easeOutBack运动是一种运动,其中物体将超越边界并再次返回.更多关于不同的运动功能.您可以在下面看到此链接.

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

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

Answer 1

您可以使用-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立方体的界限.因此,要根据需要实际设置曲线动画,您需要添加一个指定"溢出"的额外关键帧.

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

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