アニメーション（CSSとJavascript onclick）を繰り返すには

Question

CSSとJavaScriptで設定されたアニメーションをonclickで繰り返すにはどうしたらいいですか？ 私は非常に初心者のコードライターであり、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で変更なし

あなたの問題を解決するためにこの回答を使用してください。

Answer 2

関数を定義するの問題を有する所与のJavaScriptコード。 また、私はcharge()

ので、私はコメントしている不足している要素と呼ばれ、以下に任意の関数を見つけることができませんdischarge = function(){ electronとli のようないくつか欠けている要素があります使用してください。

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";}