javascript - 有人可以帮我在按键后运行 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 动画。这是一个似乎对键盘 react 更好的代码笔 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>