在动画CSS3 +关键帧或过渡期间更改速度

时间:2013-04-26 02:22:49

标签: css-transitions css-animations

我想以固定的速度旋转一个正方形,然后,在动画期间的某个时刻,我想加快速度。

这是我的尝试:

http://codepen.io/JAStanton/pen/uzfji

到目前为止,但在Safari中它会闪烁。其他想法是使用纯JavaScript制作动画,尽管这在移动设备上有一些性能成本。

思想?

1 个答案:

答案 0 :(得分:5)

这可以通过链接2个动画来实现:

-webkit-animation: mymove 4s linear 0s, mymove2 2s linear 4s;

第二个将在延迟4秒后运行,因此您不必听事件。 此外,您可以通过使用自定义Bezier

通过缓动功能实现此效果

这是你想要的: http://jsfiddle.net/jtYCW/