如何使用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);