html - JavaScript CSS animation only works once -

i have bank application has super cool hand come down , drop coin piggy bank. problem is, hand drops coin once stops working.

here code:

* {   margin:0px;   padding:0px; }  body {   background-image:url('../images/bg.png'); }  @keyframes movedown {   0% {}   100% {margin-top:-220px;} }  @keyframes fadein {   0% {opacity:0;}   90%{opacity:1}   100%{opacity:0;} }  #hand {   height:300px;   width:300px;   position:absolute;   left:50%;   margin-left:-120px;   margin-top:-350px;   background-image:url("../images/hand.png");   opacity:0; }  #pigbox {   margin-left:auto;   margin-right:auto;   height:600px;   width:500px;   margin-top:250px;   position:relative;    img {     margin:0px 50px;   }  }  input[type=text] {   float:left;   display:block;   font-size:2em;   width:500px;   border-radius:10px;   border:solid 2px pink;   margin-top:10px;   font-family: 'gochi hand', cursive;   text-align:center;   padding:2px; }  #deposit {   float:left;   display:block;   font-family: 'gochi hand', cursive;   font-size:2em;   clear:left;   width:200px;   margin:10px 25px;   border-radius:10px;   background-color:pink;   border:solid 2px pink;   padding:2px;   cursor:pointer;    &:hover {     background-color:white;   } }  #withdraw {   float:left;   display:block;   font-family: 'gochi hand', cursive;   font-size:2em;   width:200px;   margin:10px 25px;   border-radius:10px;   background-color:pink;   border:solid 2px pink;   padding:2px;   cursor:pointer;    &:hover {     background-color:white;   } }  label {   text-align:center;   display:block;   font-family: 'gochi hand', cursive;   font-size:2.5em;   border-radius:10px;   width:300px;   margin-left:100px;   margin-right:100px;   margin-top:5px;   margin-bottom:-15px; }  document.getelementbyid('balance').value = "1000"  var balance = document.getelementbyid('balance').value; var deposit = document.getelementbyid('deposit'); var withdraw = document.getelementbyid('withdraw'); var hand = document.getelementbyid('hand');  deposit.addeventlistener('click', depositcash); withdraw.addeventlistener('click', withdrawcash);  function depositcash() {   var depositamt = prompt('how deposit?');    if(depositamt != number(depositamt)) {     return alert('please enter valid integer.');   }   else if (number(depositamt) < 0) {     return alert('please enter positive integer.');   }    hand.style.animation = 'movedown 1.5s ease-in-out, fadein 1.5s ease-in-out';   balance = number(balance) + number(depositamt);   document.getelementbyid('balance').value = balance; }  function withdrawcash() {   var withdrawamt = prompt('how you withdraw?');    if(withdrawamt != number(withdrawamt)) {     return alert('please enter valid integer.');   }   else if (number(withdrawamt) < 0) {     return alert('please enter positive integer.');   }   else if(withdrawamt > balance) {     return alert("your balance isn't large enough withdraw amount!")   }     balance = number(balance) - number(withdrawamt);   document.getelementbyid('balance').value = balance; }  <section id="pigbox">       <div id="hand"></div><!-- end of hand-->       <img src="images/pig.png" />       <label>balance: </label><input type="text" id="balance" />       <button id="deposit"> deposit </button>       <button id="withdraw"> withdraw </button>   </section><!-- end of pigbox--> 

<a href="http://imgur.com/fxwmgfi"><img src="http://i.imgur.com/fxwmgfi.png" title="source: imgur.com" /></a> 

notice hand.style animation when deposit money piggy bank.

any thoughts guys?

thank you!

it's because css animations don't automatically restart. in particular because didn't define time loop, executes once.

one approach use .addclass('x').removeclass('x') retrigger animation defined on class x.

.addclass() jquery of course. can same in vanilla js using, example, hand.classname += ' my-animation'; , resetting @ top of method per below.

//ref: https://css-tricks.com/restart-css-animation/    document.getelementbyid('balance').value = "1000"    var balance = document.getelementbyid('balance').value;  var deposit = document.getelementbyid('deposit');  var withdraw = document.getelementbyid('withdraw');  var hand = document.getelementbyid('hand');    deposit.addeventlistener('click', depositcash);  withdraw.addeventlistener('click', withdrawcash);    function depositcash() {    hand.classname = 'randoimage';    var depositamt = prompt('how deposit?');      if(depositamt != number(depositamt)) {      return alert('please enter valid integer.');    }    else if (number(depositamt) < 0) {      return alert('please enter positive integer.');    }      hand.classname += ' my-animation';    balance = number(balance) + number(depositamt);    document.getelementbyid('balance').value = balance;  }    function withdrawcash() {    var withdrawamt = prompt('how you withdraw?');      if(withdrawamt != number(withdrawamt)) {      return alert('please enter valid integer.');    }    else if (number(withdrawamt) < 0) {      return alert('please enter positive integer.');    }    else if(withdrawamt > balance) {      return alert("your balance isn't large enough withdraw amount!")    }        balance = number(balance) - number(withdrawamt);    document.getelementbyid('balance').value = balance;  }

.randoimage {    width: 25px;    height: 25px;    background-image: url(data:image/gif;base64,r0lgodlheaaqamqaaorhhovskudfoulrsop3woydzu6qdvcchpgolfo0o/xbs/fnwfjz0frl3/zy7////waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaach5bakaabaalaaaaaaqabaaaavvicsozglcqaosj6mu7fiyzekqnktoqgdsm8hbadguxogaiqhsvp5qanqkgiguhwfuylcvdfcrkue1lbavavifidltimbkc5gm2hb0slbcbmqib0ujiqa7);  }    * {    margin:0px;    padding:0px;  }    @keyframes movedown {    0% {}    100% {margin-top:-220px;}  }    @keyframes fadein {    0% {opacity:0;}    90%{opacity:1}    100%{opacity:0;}  }    #hand {    height:300px;    width:300px;    position:absolute;    left:50%;    margin-left:-120px;    margin-top:-350px;    /*background-image:url("../images/hand.png");*/    opacity:0;  }    #pigbox {    margin-left:auto;    margin-right:auto;    height:600px;    width:500px;    margin-top:250px;    position:relative;      img {      margin:0px 50px;    }    }    input[type=text] {    float:left;    display:block;    font-size:2em;    width:500px;    border-radius:10px;    border:solid 2px pink;    margin-top:10px;    font-family: 'gochi hand', cursive;    text-align:center;    padding:2px;  }    #deposit {    float:left;    display:block;    font-family: 'gochi hand', cursive;    font-size:2em;    clear:left;    width:200px;    margin:10px 25px;    border-radius:10px;    background-color:pink;    border:solid 2px pink;    padding:2px;    cursor:pointer;      &:hover {      background-color:white;    }  }    #withdraw {    float:left;    display:block;    font-family: 'gochi hand', cursive;    font-size:2em;    width:200px;    margin:10px 25px;    border-radius:10px;    background-color:pink;    border:solid 2px pink;    padding:2px;    cursor:pointer;      &:hover {      background-color:white;    }  }    label {    text-align:center;    display:block;    font-family: 'gochi hand', cursive;    font-size:2.5em;    border-radius:10px;    width:300px;    margin-left:100px;    margin-right:100px;    margin-top:5px;    margin-bottom:-15px;  }    .my-animation {    animation: movedown 1.5s ease-in-out, fadein 1.5s ease-in-out;  }

<section id="pigbox">        <div class="randoimage" id="hand"></div><!-- end of hand-->        <img class="randoimage" />        <!--<img src="images/pig.png" />-->        <label>balance: </label><input type="text" id="balance" />        <button id="deposit"> deposit </button>        <button id="withdraw"> withdraw </button>    </section><!-- end of pigbox-->