在javascript中触发css动画答案

【问题标题】：Trigger css animation in javascript在javascript中触发css动画
【发布时间】：2016-03-10 08:04:23
【问题描述】：

当我按下箭头键时如何触发 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;

    }

【问题讨论】：

您在 #down.active （或您想要的任何其他类名）而不是 #down 上定义动画。然后您在单击时添加类active。或者切换它，如果你想在下次点击时停止它。
@Andrei Gheorghiu 我不太明白。我怎样才能使它不被切换？我怎样才能让课程只有在我按下箭头键时才处于活动状态？？
创建一个minimal reproducible example。我想不出一个正当的理由为什么要为您创建它。

标签： javascript css animation arrow-keys

【解决方案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;
 }
}

【讨论】：

如果我有一个javascript背景，我怎样才能得到背景顶部的矩形？我也希望它是这样，当我按下按钮时，动画会一直播放，直到我释放按钮。不切换。