Webkit 动画从 javascript 开始

Question

我怎样才能在 if 语句之后从 javascript 开始一个 css Webkit 动画，顺便说一句，我已经在代码中做了一些错误的事情。我想要 if stament 来启动 webkit 动画。我试过了，但无法正常工作。

HTML

<!DOCTYPE html>
<html lang="en">

<head>

  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>My New Pen!</title>

  <!--  Styles  -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link rel="stylesheet" href="styles/index.processed.css">
</head>

<body>
  <div class="element-animation"></div>


  <div class="center">
    <p>Clicks: <a id="Clicks">0</a></p>
  </div>
  <script src="scripts/index.js"></script>
</body>

</html>

CSS

html {
  background: #5f858e;
  color: white;
  font-size: 250%;
  font-family: 'Montserrat', sans-serif;
}

div.center {
position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
}

.element-animation{
      height: 100px;
    width: 100px;
    background-color: black;
  -webkit-animation: animationFrames linear 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -webkit-transform:  translate(200px,0px)  rotate(180deg) ;
  }
}

Javascript:

 var clicks = 0;
 document.body.onkeyup = function(e) {
     if (e.keyCode == 32) {
         clicks += 1;
         document.getElementById("Clicks").innerHTML = clicks;
         var audio = new Audio('http://soundbible.com/mp3/Button_Press-Marianne_Gagnon-779186363.mp3');
         audio.play();
     }    
 }

Answer 1

您可以做到这一点的唯一方法是向要设置动画的对象添加 CSS class。例如：

$(".yourObject").addClass("animationClass");

只需在您的 if 语句后加上类似的内容即可。它应该可以工作。

Webkit 动画从 javascript 开始

Webkit animation start from javascript

javascript

webkit