JavaScript CSS animation only works once

Question

I have an bank application that has a super cool hand come down and drop a coin into a piggy bank. Problem is, the hand only drops the coin once then stops working.

Here is my 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 much would you like to deposit?');

  if(depositAmt != Number(depositAmt)) {
    return alert('Please enter a valid integer.');
  }
  else if (Number(depositAmt) < 0) {
    return alert('Please enter a 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 much you you like to withdraw?');

  if(withdrawAmt != Number(withdrawAmt)) {
    return alert('Please enter a valid integer.');
  }
  else if (Number(withdrawAmt) < 0) {
    return alert('Please enter a positive integer.');
  }
  else if(withdrawAmt > balance) {
    return alert("Your balance isn't large enough to withdraw that 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 the hand.style animation when you deposit money into the piggy bank.

Any thoughts guys?

Thank you!

Answer 1

It's because CSS animations don't automatically restart. In particular because you didn't define a time loop, so it just executes once.

One approach is for you to use .addClass('x').removeClass('x') to retrigger an animation defined on class X.

.addClass() is jQuery of course. You can do the same in vanilla JS using, for example, hand.className += ' my-animation'; and resetting at the top of the method as 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 much would you like to deposit?');

  if(depositAmt != Number(depositAmt)) {
    return alert('Please enter a valid integer.');
  }
  else if (Number(depositAmt) < 0) {
    return alert('Please enter a positive integer.');
  }

  hand.className += ' my-animation';
  balance = Number(balance) + Number(depositAmt);
  document.getElementById('balance').value = balance;
}

function withdrawCash() {
  var withdrawAmt = prompt('How much you you like to withdraw?');

  if(withdrawAmt != Number(withdrawAmt)) {
    return alert('Please enter a valid integer.');
  }
  else if (Number(withdrawAmt) < 0) {
    return alert('Please enter a positive integer.');
  }
  else if(withdrawAmt > balance) {
    return alert("Your balance isn't large enough to withdraw that 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-->

Answer 2

You should delete style for Hand after animation (add 3 line to your script):

...

var myHand = false;

deposit.addEventListener('click', depositCash);

withdraw.addEventListener('click', withdrawCash);

function depositCash() {

if (myHand) clearTimeout(myHand);

...

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;

myHand = setTimeout(function(){hand.style.animation = '';}, 2000);

}