如何使用JavaScript为元素programmaticaly设置动画效果？

Question

我正在查看此代码http://codepen.io/optyler/pen/FgDyr，如果您将鼠标悬停在三角形元素上，您将看到动画。但是，我不想将它悬停，而是想用JavaScript编程。这是我迄今所做的：

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

，并增加了新的CSS类

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

动画工作虽然你可以在这里看到http://imgur.com/a/V9JyO左侧部分仅动画。我在这里做错了什么？

Answer 1

由于您使用的是CSS 3动画，因此您可能需要某种类型的active类。

只需将:hover选择器（第54行）替换为.active即可。即：

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

您可以通过添加.active类以编程方式启动的动画或停止它在去除类。

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

Answer 2

在你的CSS添加

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

只是快速的想法，你可以避开三个路口通过改变从rgba的颜色rgb或纯色变得比他们的选民更暗，

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