在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

這是小提琴的例子

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中觸發CSS動畫

問題描述

1 個解決方案

解決方案1
0 2016-03-10 11:17:01

在JavaScript中觸發CSS動畫

問題描述

1 個解決方案

解決方案1 0 2016-03-10 11:17:01

解決方案1
0 2016-03-10 11:17:01