Javascript 从JS设置CSS关键帧的动画

我想从javascript中触发一个基于css关键帧的动画。 在阅读了有关stackoverflow的一些答案后，我尝试使用jquery addClass函数（单击蓝色形状开始动画）：

---

有没有办法通过使用javascript前后一致地设置此形状的动画？

您正在寻找的解决方案是

javascript

或明智地使用

css关键帧

：

在codepen示例中，用此代码替换css中的所有内容：

test {
  background-color: blue;
  width:346px;
  height:213px;
    clip-path:  polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px);
}

.animate { 
  animation-duration: 3s;
  animation-name: animtest;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: forward;
}
.reverseanimate { 
  animation-duration: 3s;
  animation-name: animtest;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

@keyframes animtest {
  0% {
    clip-path: polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px)
  }
  100% {
    clip-path: polygon(0.00px 168.65px, 0.00px 229.00px, 345.00px 30.17px, 292.64px 0.00px, 0.00px 168.65px)
  }
}

let target = document.getElementById('test');
 setInterval(function(){  
 if ($(target).hasClass("animate")) {
    $(target).removeClass("animate");
    $(target).addClass("reverseanimate");
  }
  else {
    $(target).addClass("animate");
    $(target).removeClass("reverseanimate");
  }
 }, 3000);

然后，

用此代码替换js中的所有内容

：

test {
  background-color: blue;
  width:346px;
  height:213px;
    clip-path:  polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px);
}

.animate { 
  animation-duration: 3s;
  animation-name: animtest;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: forward;
}
.reverseanimate { 
  animation-duration: 3s;
  animation-name: animtest;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

@keyframes animtest {
  0% {
    clip-path: polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px)
  }
  100% {
    clip-path: polygon(0.00px 168.65px, 0.00px 229.00px, 345.00px 30.17px, 292.64px 0.00px, 0.00px 168.65px)
  }
}

let target = document.getElementById('test');
 setInterval(function(){  
 if ($(target).hasClass("animate")) {
    $(target).removeClass("animate");
    $(target).addClass("reverseanimate");
  }
  else {
    $(target).addClass("animate");
    $(target).removeClass("reverseanimate");
  }
 }, 3000);

---

注意：由于某种原因，我无法在codepen中创建帐户。

经过进一步研究，我能够解决此问题

我现在使用的不是css动画属性，而是转换：

.animate { 
   transition: clip-path 3s;
   clip-path: polygon(0.00px 168.65px, 0.00px 229.00px, 345.00px 30.17px, 292.64px 0.00px, 0.00px 168.65px)

}
.reverseanimate { 
   transition: clip-path 3s;
   clip-path: polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px)
}

---

我还更新了我的代码笔，提供了一个工作示例：

感谢您的回答，但不幸的是，这个解决方案不适合我。“点击”事件只是一个例子。我需要能够完全从javascriptI触发动画及其反向副本我也编辑了我的答案，这次我使用了jQuery（而不是vanilla js）使用setInterval（），您还可以将其替换为一个完全成熟的函数，而不是方法。我真的不知道你希望编辑的答案是什么。这几乎就是我要找的。然而，我不希望它不断地充满活力。它应该仅在调用时设置动画或反转动画（取决于动画状态）一次。使用您的解决方案，动画永远不会停止，例如，如果我删除间隔（可能是因为无限动画迭代计数）。我试图把你的建议搞得一团糟，修改一些参数，或者把它放到一个点击事件中，但是我没有得到我想要的结果。我希望这能澄清我的问题。