A CodePen by Tim Smith.

500-coffee-cup-icons.markdown

500 coffee cup icons

Done in three lines of code in HAML

A Pen by Tim Smith on CodePen.

License.

index.haml

%ul.cups
 - (1...500).each do |i|
  %li

script.js

$("ul.cups li").each(function( index ) {
		  $(this).append("<img src='http://s.cdpn.io/13034/coffeecup.svg'/>");
		  $(this).addClass('swing-in');
		});

style.scss

@import "compass";
//500 coffee cups! 
// This is completely silly :)

$ease-in-quart: cubic-bezier(0.895,  0.030, 0.685, 0.220);
$ease-out-quart: cubic-bezier(0.165,  0.840, 0.440, 1.000);

body {background:#252527;}

ul.cups {
	perspective:800;
	transform-style: preserve-3d;
	margin-top:1rem;
	list-style: none;

	li {
		width:30px;
		float:left;
		margin:0 1% 1% 0;
    opacity:0;
	}
	
	img {max-width:100%;}	
}
@keyframes swingIn {
	 0% {
	  transform:rotateY(90deg);
	  animation-timing-function:$ease-in-quart;
	  }
	  5% {
	   opacity:.5;
	   animation-timing-function: linear;
	  }
	 60% {
	   transform:rotateY(-20deg);
	   animation-timing-function:$ease-out-quart;
	 }
	 100% { 
	   	opacity:1;
	   	transform:rotateY(0deg);
	}
 }


$delay-base:1.5s; 
@for $i from 1 through 10{
	.swing-in:nth-of-type(#{$i}n+1) { 
		animation:swingIn 1s $delay-base+0.2*$i linear both;	
	}
}