在javascript中触发css动画

Question

如何在按下箭头键时获得CSS动画触发器？

动画代码：

<head>


  <style>
    body {
  padding: 30px;
}

#down {
  width: 451px;
  height: 589px;
  display: block;
  background-image: url("images/guy.png");
  animation: sprite .6s steps(17) infinite;



}

@keyframes sprite {
 100% {
   background-position: -7667px;
 }
}
  </style>
 </head>

<body>
  <div id=down></div>

  <script src="/js/prefixfree.min.js"></script>
<script>
</script>
</body>

</html>

所以我想在我按下的时候触发css动画。我该怎么做呢？

Javascript移动代码

if (40 in keysDown) { // down
        guy.y += guy.speed * modifier;

    }

Answer 1

下面是fiddle示例

HTML：

<div id=down></div>

JS：

    $(document).bind("keydown", function(event) {   
   var code = event.keyCode || event.which;
   if(code == 40) { //Down arrow
     //guy.y += guy.speed * modifier;
     $('#down').addClass('down');
   }   
});
$(document).bind("keyup", function(event) {
   //guy.y += guy.speed * modifier;
   $('#down').removeClass('down');
});

CSS：

    .down {
  width: 100px;
  height: 100px;
  display: block;
  border: 1px solid black;
  animation: sprite .6s steps(17) infinite;
}

@keyframes sprite {
 100% {
   background-color: red;
 }
}