如何使用 jQuery 判断 CSS3 动画处于哪个阶段？

【问题标题】：How to tell what stage a CSS3 animation is at using jQuery?如何使用 jQuery 判断 CSS3 动画处于哪个阶段？
【发布时间】：2013-06-10 14:49:50
【问题描述】：

例如，这是我的代码：

@-webkit-keyframes anim {
    0%   {
        -webkit-transform: translate(-100px,0px) rotate(5deg);
    }
    50%   {
        -webkit-transform: translate(-140px,-5px) rotate(10deg);
    }
    100%   {
        -webkit-transform: translate(200px,-30px) rotate(40deg);
    }
}

我如何准确判断它何时达到 50%？我知道我可以检测到它何时结束，但这在这里没有帮助。

现在...我可以尝试以时间为基础，因为动画运行了 3 秒，但这似乎很狡猾。

谢谢

【问题讨论】：

标签： jquery css animation webkit listener

【解决方案1】：

我认为单个动画的中间阶段没有通知事件。

作为一种解决方法，您可以链接两个单独的动画（当第一个动画结束时使用 JS 启动第二个动画）并使用第一个动画结束时的事件来了解何时到达整个序列的中间。

这是一篇关于解决方法的文章：

CSS Animation Keyframe Events (Javascript solution)

【讨论】：

我想这对我来说已经很好了，但是设置它会很烦人。真正的动画由 11 个部分组成，这意味着我必须先制作 11 个不同的持续时间，然后将它们链接在一起：(
@Phil，您可能可以为每个连续动画创建一个数据表、一个表索引和一个通用事件处理程序来为您完成所有工作。