CSSアニメーションOnclick

Question

通常のJS（JQueryではなく）を使用して、クリックした後にいくつかの画像が揺れるようにしようとしていますが、動作していません。

HTML：

<img id='s1_imgB' class="fragment"... onClick="wrongAnswer()"... 

JS：

function wrongAnswer(){ 
     document.getElementById("s1_imgB").style.className = "shake"; 

CSS：

.shake:hover {.... 

私が得る要素がで振ることができますデフォルトは以下のhtmlを使用します。しかし、イメージをクリックした後にCSSアニメーションを開始させたいと思っています。

HTML：

<img id='s1_imgB' class="fragment shake".... 

ページが読み込まれると、マウスがホバーに影響は画像をクリックした後、次に、マウスのホバーは、画像を振るさせなければならない、非アクティブにする必要があります。

私は間違っていますか？あなたのCSSで:hover識別子を削除する必要があります

Answer 1

は、私はそれが私はそれがそのようにすべきだと思います

document.getElementById("s1_imgB").className += " shake"; 

Answer 2

されるべきだと思います画像をクリックしてからマウスを動かしてホバーをトリガーした後で、それらのスタイルを適用することができるためです。また、画像をマウスオーバーするたびに揺れを取得します。 JSで吹き出しなしのクラスを追加すると、シェイクスタイルが適用されます。

また、fragmentをshakeに置き換えた時点で、shakeクラスを追加することもできます。しかし、あなたが提供した情報に基づいてそれを行う必要があるかどうかは不明です。

document.getElementById("s1_imgB").className += " shake"; 

Answer 3

（.style）なし

function wrongAnswer(){ 
document.getElementById("s1_imgB").className = "shake"; 

：ありがとう

Answer 4

画像をクリックすると、振るアニメーションを行うクラスを追加するだけです。 は、基本的にはそれだけで1行です：クラスを削除するには

document.getElementById('s1_imgB').classList.add("shake"); 

だけで実行します。ここでは

document.getElementById('s1_imgB').classList.remove("shake"); 

はこれを行いjsfiddleです。

揺らぎのあるアニメーションは、thisサイトからです。

私はあなたを助けたと思います。