javascript - 您可以使用 JavaScript 将 'force' CSS 关键帧动画设置为最终状态吗？

Question

我有由滚动行为触发的 CSS 关键帧动画。如果用户滚动得太快，我希望能够使用 JavaScript 将一些动画发送到它们的“完成/最终”状态，因为动画是相互构建的。

假设我有一个 3000 毫秒的动画，我决定在 1500 毫秒过去后完成 -- 是否可以使用 JS 强制此 CSS 关键帧动画提前完成？

** PS -- 我不是谈论使用前向填充模式保留最终帧的属性。

谢谢!

Answer 1

如何使用类来控制这样的状态:

.play{
  animation: animationFrames ease 5s;
  -webkit-animation: animationFrames ease 5s;
  -moz-animation: animationFrames ease 5s;
  -o-animation: animationFrames ease 5s;
  -ms-animation: animationFrames ease 5s;
}

.end{
    transform:  translateX(100px);
    -moz-transform:  translateX(100px);
    -webkit-transform:  translateX(100px);
    -o-transform:  translateX(100px);
    -ms-transform:  translateX(100px);
}

JavaScript

$('#end').click(function(){
    $('#box').removeClass('play').addClass('end');
});

http://jsfiddle.net/a2Gsh/