如何控制@keyframes 何时激活？答案

【问题标题】：How to control when @keyframes is activated?如何控制@keyframes 何时激活？
【发布时间】：2022-01-08 16:40:40
【问题描述】：

我想使用@keyframes，所以我这样做了：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: action 5s infinite;
}

@keyframes action {
  0%   {top: 0px;}
  25%  {top: 200px;}
  75%  {top: 50px}
  100% {top: 100px;}
}

但是，此代码会在页面加载时运行。有没有办法用js在某个时间触发@keyframes？例如。

for (var i = 0; i < 10; i++) {
    //Do something
}
//Activate @keyframes

谢谢！

【问题讨论】：

使用animation-delay属性。
你可以试试animation-play-state 可能吗？您可以在 CSS 中将其设置为暂停并在您的 JS 代码中切换它？
@PrimeBeat 你会怎么做？
@mm4096 我把它作为答案发布在下面

标签： javascript html css css-animations

【解决方案1】：

如果你想在一定延迟后开始动画，比如加载后5s，你可以轻松使用 the animation-delay property

如果您需要其他任何东西，您可能需要使用 javascript。只需添加一个包含动画的类，如下所示：

    document.getElementsByTagName("div")[0].classList.add("animationClassName")

This article on csstricks 提供有关该主题的更多详细信息以及对动画进行更复杂控制的提示。

【讨论】：

【解决方案2】：

在 CSS 中：

div {
  // your div code
  animation-play-state: paused;
}

在 JS 中：

// do some stuff after the page loads (give your div an ID)
document.getElementById("myDiv").style.animationPlayState = "running";

【讨论】：

【解决方案3】：

您可以将动画定义分离到另一个 css 类并以编程方式触发它。首先，将类添加到您的 div 例如：

<div class="test">
</div>

在您定义动画的地方创建另一个 css 类：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}

.animate{
   animation: action 5s infinite;
}

@keyframes action {
  0%   {top: 0px;}
  25%  {top: 200px;}
  75%  {top: 50px}
  100% {top: 100px;}
}

找到合适的时候把这个类添加到div元素classList中：

for (let i = 0; i < 10; i++) {
    //
}
document.querySelector('.test').classList.add('animate');

【讨论】：

【解决方案4】：

如果你想使用 Javascript 触发动画，你只需要设置元素的动画。

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}

@keyframes action {
  0%   {top: 0px;}
  25%  {top: 200px;}
  75%  {top: 50px}
  100% {top: 100px;}
}

document.getElementByID('your-Elem').style.animation="action 5s infinite";

所以在你的情况下，我会说给元素一个 ID（或者如果你要这样做，就选择所有 div），然后在你的 for 循环中运行这一行。

【讨论】：

【解决方案5】：

这个怎么样？
此 div 在文档加载 3 秒后开始动画。

.animation {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: action 5s infinite;
  animation-delay: 3s;
}

@keyframes action {
  0%   {top: 0px;}
  25%  {top: 200px;}
  75%  {top: 50px}
  100% {top: 100px;}
}

&lt;div class="animation"&gt;&lt;/div&gt;

【讨论】：