如何重復動畫（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

給定的javascript代碼與定義函數有關。 請使用discharge = function (){有一些缺少的元素，例如electron和li我也找不到任何稱為charge()函數

因此，我已經評論了缺少的元素，並在下面提供。

discharge = function () {
// document.getElementById("electron").style.visibility = "visible";
// document.getElementById("li").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";}

Answer 2

請使用此答案解決您的問題

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沒有變化。