如何使用JavaScript为元素编程设置动画？

我正在看这段代码，如果您将鼠标悬停在三角形元素上，您将看到动画。但是，我希望使用JavaScript编程，而不是将其悬停。这就是我到目前为止所做的：

document.querySelector('.triangle').classList.add('animateSpeak');

并添加了一个新的css类

.animateSpeak {
    animation: vibrate .5s infinite ease-out;
}

---

动画正在工作，但正如您在这里看到的，左侧部分仅在制作动画。我在这里做错了什么吗？

因为您使用的是CSS 3动画，您可能需要某种类型的

活动类

只需将
：悬停
选择器（第54行）改为，比如说，
.active
。i、 e:

.triangle.active,
.triangle.active:before,
.triangle.active:after {
  animation: vibrate .5s infinite ease-out;
}

可以通过添加
.active
类以编程方式启动动画，也可以通过删除类来停止动画

要回答第二个问题，它看起来像
：before
和
：after
元素也需要动画

.animateSpeak,
.animateSpeak:before,
.animateSpeak:after {
  animation: vibrate .5s infinite ease-out;
}

快速思考一下，您可以通过将颜色从
rgba
更改为
rgb
或纯色，避免三者的交叉点变得比其组成部分更暗

$font_color: rgb(231,236,241);