CODEWITHSUNDEEP
javascriptwebkit
Linushg111
Linushg111

Reputation: 76

Webkit animation start from javascript

How can i can i start a css Webkit animation from javascript after the if stament, btw i have probely done sothing worong in the code. i would like the if stament to start the webkit animation. I tried but couldnt get it to work.

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();
     }    
 }

Upvotes: 0

Views: 444

Answers (1)

Martijn Vissers
Martijn Vissers

Reputation: 782

The only way you can do this is by adding a CSS class to the object you want to animate. e.g:

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

Just put something like that after your if statement. and it should work.

Upvotes: 1

Related Questions