Webkit动画从javascript开始

我怎样才能在 if stament 之后从 javascript 启动 css Webkit 动画，顺便说一句，我已经在代码中探测了 worong。我希望 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();
     }    
 }

执行此操作的唯一

方法是将 CSS 类添加到要进行动画处理的对象。例如：

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

只需在您的 if 语句之后添加类似的东西。它应该有效。

相关内容

最新更新

热门标签：