Webkit animation démarrer à partir de javascript

Comment puis-je démarrer une animation css Webkit à partir de javascript après le if stament, btw j'ai probablement fait quelque chose de mal dans le code. Je voudrais l'étape si commencer l'animation webkit. J'ai essayé mais je ne pouvais pas le faire fonctionner.Webkit animation démarrer à partir de javascript

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

Source

2017-03-24 Linushg111

La seule façon que vous pouvez faire est d'ajouter une classe CSS à l'objet que vous souhaitez animer. par exemple:

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

Il suffit de mettre quelque chose comme ça après votre instruction if. et ça devrait marcher.

Source

2017-03-24 08:09:09

Webkit animation démarrer à partir de javascript

Répondre

Questions connexes