javascript - 如何重复动画(CSS 和 Javascript onclick)

Question

如何通过 onclick 重复使用 CSS 和 Javascript 设置的动画？我是一个非常初级的代码编写者，并且了解 HTML、CSS 和 Javascript。我不知道为什么下面的在线点击和功能只能工作一次。如果你能帮助我，我将不胜感激。

代码

function discharge() {
    document.getElementById("electron").style.visibility = "visible";
    document.getElementById("electron").style.WebkitAnimation = "mymove 5s 1   backwards"; // Code for Chrome, Safari, and Opera
    document.getElementById("submit").style.backgroundColor = "lightblue";
    document.getElementById("submit").style.boxShadow = "0px 3px 3px red";
    document.getElementById("submit1").style.backgroundColor = "#4CAF50";
    document.getElementById("submit1").style.boxShadow = "0px 0px 0px red";
}

#electron {
    position: relative;
    left: -10px;
    visibility: hidden;
}
@-webkit-keyframes mymove {
    0% {
        left: 0px;
        top: 0px;
    }
    25% {
        left: -32px;
        top: 0px;
    }
    50% {
        left: -32px;
        top: -20px;
    }
    75% {
        left: 158px;
        top: -20px;
    }
    100% {
        left: 158px;
        top: 5px;
    }
}

<div>
    <button id="submit" onclick="discharge()">Discharge</button>
    <button id="submit1">charge</button>
</div>

<div id="electron">
    <br /><i class="fa fa-minus-circle"></i>
    <br /><i class="fa fa-minus-   circle"></i>
    <br />
</div>

Answer 1

请使用此答案解决您的问题

html

    <div>
  <button id="submit" onclick="discharge()">Discharge</button>
  <button id="submit1" onclick="charge()">charge</button>
</div>

<div id="electron">
  <br/><i class="fa fa-minus-circle"></i>
  <br/><i class="fa fa-minus-   circle"></i>
  <br/>
</div>

JavaScript

discharge = function() {
  document.getElementById("electron").style.visibility = "visible";
  document.getElementById("electron").style.WebkitAnimation = "mymove 5s 1   backwards"; // Code for Chrome, Safari, and Opera
  document.getElementById("submit").style.backgroundColor = "lightblue";
  document.getElementById("submit").style.boxShadow = "0px 3px 3px red";
  document.getElementById("submit1").style.backgroundColor = "#4CAF50";
  document.getElementById("submit1").style.boxShadow = "0px 0px 0px red";
}

charge = function(){
document.getElementById("electron").removeAttribute('style');
document.getElementById("submit").removeAttribute('style');
document.getElementById("submit1").removeAttribute('style');
}

CSS 没有变化。