如何控制何时激活@keyframes？

Question

我想使用@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

谢谢！

Answer 1

这个怎么样？
此 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;}
}

<div class="animation"></div>

Answer 2

如果你想使用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（或者只是 select 所有 div，如果那是你想要的）然后运行你的这一行循环。

Answer 3

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

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

创建另一个 css class 定义动画的位置：

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;}
}

将此 class 添加到 div 元素 class当你找到合适的列表时：

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

Answer 4

在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";

Answer 5

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

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

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

This article on csstricks 提供了有关该主题的更多详细信息以及更复杂的动画控制技巧。

如何控制何时激活@keyframes？

How to control when @keyframes is activated?

html

javascript

css

css-animations