我怎样才能在 if 语句之后从 javascript 启动 css Webkit 动画，顺便说一句，我在代码中可能做了一些错误的事情。我想要 if 语句来启动 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 语句后面添加类似的内容即可。它应该可以工作。
关于javascript - Webkit动画从javascript开始，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42994238/