%div.l1
	- (0...40).each do
		%div

%div.l2
	- (0...40).each do
		%div

%div.l3
	- (0...40).each do
		%div
View Compiled
$n: 40
$w: 30px
$l: #436, #936, #c36

body
	background: #036

div[class]
	width: $n * $w
	height: 90%
	position: absolute
	left: 50%
	transform: translateX(-50%)

div > div
	border-radius: 0 0 $w / 2 $w / 2
	width: $w
	min-height: $w
	float: left
	transform: translateY(-100%)
	animation: drop 2s forwards ease-out

@keyframes drop
	from
		transform: translateY(-100%)
	to
		transform: translateY(0)

@each $c in $l
	$i: index($l, $c)

	.l#{$i} div
		background: $c
	
		@for $j from 1 through $n
			&:nth-child(#{$j})
				height: random(100 - 20 * ($i - 1)) * 1%
				animation-delay: random(60 + 20 * ($i - 1)) * .01s
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.