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

Question

例如，这是我的代码：

@-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 秒，但这似乎很狡猾。

谢谢

Answer 1

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

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

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

CSS 动画关键帧事件（Javascript 解决方案）