keypressの後に誰かがCSSアニメーションを実行するのを助けることができますか？

Question

私はKonamiコードを押したときにアニメーションを表示しようとしていましたが、何らかの理由で3〜5回連続してポップアップするアラートウィンドウを表示すると、私はアニメーションを表示することができません。ここで

は私のCSSコードです：ここで

#pirateship { 
    position:absolute; top:420px;width:100%; 
    height:160px; 
    background-image:url(pirateship.png); 
    background-position:-200px; 
    background-repeat: no-repeat; 
} 
.sail { 
    animation: sailing 8s infinite linear; 
} 

は私のスクリプトです：

if (window.addEventListener) {var state=0, Konami=[38,38,40,40,37,39,37,39,66,65]; 
window.addEventListener("keydown", function(e) { 
if (e.keyCode==Konami[state]) state++; else state=0; if (state==10) 
$('#pirateship').addClass('sail'); window.alert("test");}, true);} 

そしてもちろん、私は体でこれを表示します。他に

<div id="pirateship" ></div> 

を単語、この部分は動作しない部分は

$('#pirateship').addClass('sail'); 

私はここでの人々の推奨や類似したサイトに基づいて、成功することなくいくつかの方法で試してみました。 私は何が間違っていますか？

Answer 1

正常に動作するようです。 @keyframesのアニメーションがありません。ここではそれがうまく働いていますが、セーリング `@keyframes {}` http://codepen.io/anonを定義していないキーボードhttp://codepen.io/anon/pen/pRpoaN

if (window.addEventListener) { 
 
    var state = 0, 
 
    Konami = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65]; 
 
    window.addEventListener("keydown", function(e) { 
 
    if (e.keyCode == Konami[state]) state++; 
 
    else state = 0; 
 
    if (state == 10) 
 
     $('#pirateship').addClass('sail'); 
 
    window.alert("test"); 
 
    }, true); 
 
}

#pirateship {position:absolute; top:420px;width:100%; height:160px; 
 
background-image:url(pirateship.png); background-position:-200px; 
 
background-repeat: no-repeat;} 
 
.sail {animation: sailing 8s infinite linear;} 
 
@keyframes sailing { 
 
    100% { 
 
    background: red; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="pirateship">arr</div>