这个问题在这里已有答案：
有没有办法在第一次单击后多次调用函数动画而不更改HTML代码？我需要保持id和class，因为它们在代码中。我试图将display属性设置为none，但它似乎不起作用。我希望动画在点击<p>标签时启动，但是一旦我第一次点击它，动画就不会再次启动。我甚至想在动画中间再次调用该函数。我阅读了有关此主题的所有其他问题，但它们似乎对我不起作用，因为HTML不同。请不要使用Jquery，但可以使用普通的JS。谢谢！
<!DOCTYPE html>
<html>
<head>
<style>
.something {
background:blue;
height:20px;
width:20px;}
.earth{
position :relative;
animation:move 10s linear;
background:red;
height:20px;
width:20px;
}
@-webkit-keyframes move
{
from { left: 0%; }
to { left: 100%; }
}
</style>
<script>
function changetext (){
document.getElementById("demo").style.color = "red";
animation();
}
function animation(){
document.getElementById('ghost').className ='earth';
}
function repeat(){
var sd = document.getElementById("ghost").className ='earth';
sd.style.display = 'none';
}
</script>
</head>
<body>
<div class="something"></div>
<div id="ghost"> </div>
<p onclick="changetext();" id="demo"> HELLO WORLD </p>
</body>
</html>
您可以删除该类并重新添加它，稍微不会引起1ms的延迟。
function changetext() {
document.getElementById("demo").style.color = "red";
animation();
}
function animation() {
document.getElementById('ghost').className = '';
setTimeout(function(){
document.getElementById('ghost').className = 'earth';
}, 1);
}.something {
background: blue;
height: 20px;
width: 20px;
}
.earth {
position: relative;
animation: move 10s linear;
background: red;
height: 20px;
width: 20px;
}
@-webkit-keyframes move {
from {
left: 0%;
}
to {
left: 100%;
}<div class="something"></div>
<div id="ghost"> </div>
<p onclick="changetext();" id="demo"> HELLO WORLD </p>