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结束时开始第二个动画）并使用第一个动画在第一个动画结束时知道何时到达整个序列的中间位置。 / p>

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

CSS Animation Keyframe Events (Javascript solution)

如何判断CSS3动画在使用jQuery的阶段？

1 个答案: