如何多次调用动画的函数[重复]
Posted
技术标签:
【中文标题】如何多次调用动画的函数[重复]【英文标题】：How to call a function for an animation multiple times [duplicate] 【发布时间】：2018-08-11 03:27:01 【问题描述】：我从另一个问题“CSS Animation onClick”中获取此代码。我想知道是否有可能有一个按钮来调用该功能，即使在动画中间，这样每次我点击按钮时它都会重新启动。请不要 JQUERY，谢谢！
<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" />
</body>
</html>
【问题讨论】：
没有 jQuery 或者根本没有 JS？ 不用jquery就可以用普通的js了，谢谢 很好，请稍等片刻；） 我试图按照其他问题回答了我的问题，但它似乎对我不起作用 检查这个 --> jsfiddle.net/uwgd7o9y/16 我为你做的，但是这个问题被关闭了。 【参考方案1】：您可以尝试删除该类并重新添加它：
function ani()
document.getElementById('img').className = '';
document.getElementById('img').className = 'classname';
【讨论】：
好像不行…… 也许你可以在发布之前测试你的代码......以上是关于如何多次调用动画的函数[重复]的主要内容，如果未能解决你的问题，请参考以下文章