JavaScriptを使用してプログラマティックに要素をアニメーション化するにはどうすればよいですか？

Question

私はこのコードhttp://codepen.io/optyler/pen/FgDyrを見ています。三角形の要素にマウスを合わせると、アニメーションが表示されます。しかし、それをホバリングするのではなく、JavaScriptを使用してプログラマティカルにしたいと思っています。

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

を、あなたは左の部分のみがアニメーション化され、ここでhttp://imgur.com/a/V9JyOを見ることができるようにアニメーションがかかわら取り組んでいる新しいCSSクラス

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

を追加しました：これは私がこれまで行っているものです。私はここで何か間違っていますか？

Answer 1

あなたはCSS 3アニメーションを使用しているので、おそらく何らかの種類のactiveクラスが必要です。

:hoverセレクタ（行54）を、代わりに.activeに変更してください。すなわち：

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

あなたは.activeクラスを追加することによって、プログラムでアニメーションを開始するか、クラスを削除することが停止することができます。

2番目の質問に答えるには、:beforeと:afterの要素もアニメーションが必要です。あなたのCSSで

Answer 2

は、あなたがrgbまたは固体の色にrgbaから色を変更することにより、その成分よりも暗くなりつつ3の交差を回避することができ、

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

だけで簡単に考えを追加

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