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

Posted 2023-03-06

【中文标题】您可以使用 JavaScript 将 CSS 关键帧动画“强制”到其最终状态吗？

【英文标题】：Can you 'force' a CSS keyframe animation to it's final state using JavaScript?

【发布时间】：2014-06-26 17:08:37

【问题描述】：

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

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

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

谢谢！

【参考方案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 的示例更新了答案。