CodePen Embed - Coffee Demo

<html>
<head>
	<title>Coffee Anim Test</title>
</head>
<body class="" style="background:#f89627;overflow:hidden; text-align:center; width:100%; height:100%; display:block;">
	<div style="width:100%; position: fixed; bottom:0; height: 50%; background: #f89627; z-index: 6"></div>
	<div style="width: 150px; height: 180px; position: absolute; left:50%; margin-left:-75px; top:50%; margin-top:-90px;">
		<img style="position:absolute; top:0px; left:0px; z-index: 6" src="http://farm9.staticflickr.com/8280/8844715142_03200d8098_o.png"/>
		<img id="falling-coffee" style="position:absolute; top:50px; left:0px; z-index: 5" src="http://farm9.staticflickr.com/8408/8844093815_f2123ee283_o.png"/>
		<img style="position:absolute; top:0px; left:0px; z-index: 4" src="http://farm8.staticflickr.com/7454/8844093599_13397a842f_o.png"/>
		<img id="rising-coffee" style="position:absolute; top:0px; left:0px; z-index: 3" src="http://farm8.staticflickr.com/7437/8844093589_8dd248fd42_o.png"/>
		<img style="position:absolute; top:0px; left:0px; z-index: 2" src="http://farm8.staticflickr.com/7308/8844093579_5fb70bc4ec_o.png"/>
		<img style="position:absolute; top:0px; left:0px; z-index: 1" src="http://farm4.staticflickr.com/3809/8844093577_a992a54c6a_o.png"/>
	</div>
  <div onclick="pourIt()" id="pour-it" style="position:absolute; bottom: 20px; left: 50%; width: 150px; height: 40px; margin-left: -75px; background: brown; line-height: 40px; font-size: 24px; font-family: serif; z-index: 20; border-radius: 20px; color: #FFF; text-shadow: 3px 3px 0px maroon; cursor:pointer;">One More</div>
</body>
</html>

#falling-coffee {
	  -webkit-animation: fallingCoffee 1.5s;
	  -moz-animation: fallingCoffee 1.5s;
	  -o-animation: fallingCoffee 1.5s;
	  -ms-animation: fallingCoffee 1.5s;
	}

	@-webkit-keyframes fallingCoffee {
      from {
        top:-800px;
      }
      to {
        top: 50px;
      }
  	} 

  	@-moz-keyframes fallingCoffee {
      from {
        top:-800px;
      }
      to {
        top: 50px;
      }
  	}

  	@-o-keyframes fallingCoffee {
      from {
        top:-800px;
      }
      to {
        top: 50px;
      }
  	}

  	@keyframes fallingCoffee {
      from {
        top:-800px;
      }
      to {
        top: 50px;
      }
  	}

  	#rising-coffee {
  	-webkit-animation: risingCoffee 1.6s;
	  -moz-animation: risingCoffee 1.6s;
	  -o-animation: risingCoffee 1.6s;
	  -ms-animation: risingCoffee 1.6s;
  	}

  	@-webkit-keyframes risingCoffee {
      from {
        top:100px;
        left:0px;
      }
      to {
        top: 0px;
        left:0px;
      }
  	} 

  	@-moz-keyframes risingCoffee {
      from {
        top:100px;
        left:0px;
      }
      to {
        top: 0px;
        left:0px;
      }
  	}

  	@-o-keyframes risingCoffee {
      from {
        top:100px;
        left:0px;
      }
      to {
        top: 0px;
        left:0px;
      }
  	}

  	@keyframes risingCoffee {
      from {
        top:100px;
        left:0px;
      }
      to {
        top: 0px;
        left:0px;
      }
  	}

function pourIt() {
 //This code snippet is emulated from https://css-tricks.com/restart-css-animation/
  
 var fallingCoffee = document.getElementById('falling-coffee');
 var risingCoffee = document.getElementById('rising-coffee');
 var newFC = fallingCoffee.cloneNode(true);
 var newRC = risingCoffee.cloneNode(true);
 fallingCoffee.parentNode.replaceChild(newFC, fallingCoffee);
 risingCoffee.parentNode.replaceChild(newRC, risingCoffee);
 
}

This Pen is owned by Uttam Grandhi on CodePen.

See more by @uttamg911 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.