0
JavaScriptのCSS Webkitアニメーションを開始するにはどうしたらいいですか？私は、Webkitのアニメーションを始めるにあたっては、その場をお借りしたいと思います。私は試しましたが、うまく動作しませんでした。Webkitのアニメーションがjavacriptから始まる
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();
}
}