Keyframes Explosion Animation

KeyframesExplosionAnimation(Emmet).html

.particle*400

KeyframesExplosionAnimation.scss

$d: 4px;

html { overflow: hidden; background: #222; }

.particle {
	position: absolute;
	width: $d; height: $d;
	border-radius: 50%;
	animation: shoot 3s ease-out infinite;
	animation-name: shoot, fade;
	
	@for $i from 0 to 400 {
		$t: (1 + .01*random(100))*1s;
		
		&:nth-child(#{$i + 1}) {
			transform: translate(random(100)*1vw, 
													 random(100)*1vh);
			background: hsl(random(360), 100%, 65%);
			animation-duration: $t;
			animation-delay: -.01*random(100)*$t;
		}
	}
}

@keyframes shoot {
	0% { transform: translate(50vw, 50vh); }
}
@keyframes fade { to { opacity: 0 } }