Javascript 如何多次调用动画的函数
我从另一个问题“”中获取此代码。我想知道是否有可能有一个按钮,该功能,即使在动画中间,使它再次启动,每次我点击按钮。请不要用JQUERY,谢谢Javascript 如何多次调用动画的函数,javascript,html,css,Javascript,Html,Css,我从另一个问题“”中获取此代码。我想知道是否有可能有一个按钮,该功能,即使在动画中间,使它再次启动,每次我点击按钮。请不要用JQUERY,谢谢 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="tex
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.classname {
-webkit-animation-name: cssAnimation;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
from {
-webkit-transform: rotate(0deg) scale(1) skew(0deg)
translate(100px);
}
to {
-webkit-transform: rotate(0deg) scale(2) skew(0deg)
translate(100px);
}
}
</style>
<script type="text/javascript">
function ani(){
document.getElementById('img').className ='classname';
}
</script>
<title>Untitled Document</title>
</head>
<body>
<input name="" type="button" onclick="ani()" />
<img id="img" src="clogo.png" width="328" height="328" />
</body>
</html>
.类名{
-webkit动画名称:cssAnimation;
-webkit动画持续时间:3s;
-webkit动画迭代计数:1;
-webkit动画计时功能:轻松;
-webkit动画填充模式:正向;
}
@-webkit关键帧cssAnimation{
从{
-webkit变换:旋转(0度)缩放(1)倾斜(0度)
翻译(100px);
}
到{
-webkit变换:旋转(0度)缩放(2)倾斜(0度)
翻译(100px);
}
}
函数ani(){
document.getElementById('img').className='className';
}
无标题文件
您可以尝试删除该类并再次添加它:
function ani() {
document.getElementById('img').className = '';
document.getElementById('img').className = 'classname';
}
没有jQuery或者根本没有JS?没有jQuery,你可以使用普通的JS,谢谢,请等我一会儿回答;)我试图按照其他问题回答我的问题,但它似乎对我不起任何作用检查此-->我为您制作,但随后此问题结束。它似乎不起作用…也许您可以在发布之前测试您的代码。。。