您可以使用 JavaScript 将 CSS 关键帧动画“强制”到其最终状态吗？答案

【问题标题】：Can you 'force' a CSS keyframe animation to it's final state using JavaScript?您可以使用 JavaScript 将 CSS 关键帧动画“强制”到其最终状态吗？
【发布时间】：2014-06-26 17:08:37
【问题描述】：

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

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

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

谢谢！

【问题讨论】：

标签： javascript css animation keyframe

【解决方案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/

【讨论】：

对这种方法有更多的运气。我需要稍微平滑一下，但到目前为止它正在工作。谢谢！
@KyleSuss 和 emn178，此方法的回退是您需要对所有动画实例的结束样式进行硬编码。

【解决方案2】：

是的，只需更改动画持续时间即可更快地结束动画，

elementWithAnimation.style.animationDuration="1500ms";

您将需要浏览器前缀，例如 webkit：

elementWithAnimation.style.webkitAnimationDuration="1500ms";

【讨论】：

嗯。试过这个，但似乎没有用。甚至添加了一个 '!important' 只是为了查看它是否被另一个规则覆盖。
@KyleSuss 这是最基本的线路。您将需要添加浏览器前缀。用 webkit 的示例更新了答案。