【问题标题】:Change speed during animation CSS3 + Keyframes or transitions在动画 CSS3 + 关键帧或过渡期间改变速度
【发布时间】:2013-04-26 17:52:01
【问题描述】:

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

这是我的尝试:

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

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

想法?

【问题讨论】:

    标签: css-transitions css-animations


    【解决方案1】:

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

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

    第二个将在 4 秒延迟后运行,因此您不必监听事件。 此外,您可以通过使用自定义贝塞尔曲线通过缓动函数实现此效果

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

    【讨论】:

    • 问题在于我不知道第一个动画的持续时间。我也不知道下一个动画的速度。直到我需要改变它。
    猜你喜欢
    • 2023-03-18
    • 1970-01-01
    • 2015-07-03
    • 2020-02-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-22
    相关资源
    最近更新 更多