Webkit动画从javascript开始
Webkit动画从javascript开始
提问于 2017-03-24 07:59:24
我如何才能启动一个css Webkit动画从javascript后，如果静止，顺便说一句，我很可能已经做了豆腐渣在代码。我想如果时间开始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();
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2017-03-24 08:09:09
唯一能做到这一点的方法是向要动画的对象中添加一个CSS类。例如：
$(".yourObject").addClass("animationClass");
在你的if声明后放点类似的东西。而且它应该能工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42994238
复制相关文章
相似问题
腾讯云开发者
