SLOW CSS RAIN

index.html

<section class="rain"></section>

script.js

// number of drops created.
var nbDrop = 44; 

// function to generate a random number range.
function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}

// function to generate drops
function createRain() {

	for( i=1;i<nbDrop;i++) {
	var dropLeft = randRange(0,1600);
	var dropTop = randRange(-1000,1400);

	$('.rain').append('<div class="drop" id="drop'+i+'"></div>');
	$('#drop'+i).css('left',dropLeft);
	$('#drop'+i).css('top',dropTop);
	}

}
// Make it rain
createRain();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

slow-css-rain.markdown

SLOW CSS RAIN

Some rain drops generated in JS through some random values (left and top position). Those drops are then animated in CSS from top to bottom (simple infinite animation).

A Pen by osde8info on CodePen.

License.

style.css

html {
  height: 100%;
}
body {
  background: #0d343a;
  overflow: hidden;
}

.drop {
  background: -moz-linear-gradient(
    top,
    rgba(13, 52, 58, 1) 0%,
    rgba(255, 255, 255, 0.6) 100%
  );
  width: 1px;
  height: 89px;
  position: absolute;
  bottom: 200px;
  animation: fall 4s linear infinite;
}

/* animate the drops*/
@-webkit-keyframes fall {
  to {
    margin-top: 900px;
  }
}
@-moz-keyframes fall {
  to {
    margin-top: 900px;
  }
}