/*splat*/ .splat{ position: absolute; left:0; top:0; width: 100%; height:100%; } .splat span{ position: absolute; width:100px; height:30px; background:#FFF; border-radius: 50%; opacity:0; } .splat span:nth-child(1){left: 0%; top:30%; animation: splat-anim 5.5s infinite;} .splat span:nth-child(2){left:10%; top:90%; animation: splat-anim 7.2s infinite;} .splat span:nth-child(3){left:15%; top:15%; animation: splat-anim 4.3s infinite;} .splat span:nth-child(4){left:20%; top:20%; animation: splat-anim 5.7s infinite;} .splat span:nth-child(5){left:25%; top:80%; animation: splat-anim 6.3s infinite;} .splat span:nth-child(6){left:30%; top:35%; animation: splat-anim 8.5s infinite;} .splat span:nth-child(7){left:35%; top:70%; animation: splat-anim 7.7s infinite;} .splat span:nth-child(8){left:40%; top:10%; animation: splat-anim 4.8s infinite;} .splat span:nth-child(9){left:45%; top:65%; animation: splat-anim 5.3s infinite;} .splat span:nth-child(10){left:50%; top:55%; animation: splat-anim 3.5s infinite;} .splat span:nth-child(11){left:55%; top:30%; animation: splat-anim 5.1s infinite;} .splat span:nth-child(12){left:60%; top:75%; animation: splat-anim 7.1s infinite;} .splat span:nth-child(13){left:65%; top:15%; animation: splat-anim 4.2s infinite;} .splat span:nth-child(14){left:70%; top:60%; animation: splat-anim 5.0s infinite;} .splat span:nth-child(15){left:75%; top:50%; animation: splat-anim 3.0s infinite;} .splat span:nth-child(16){left:80%; top:10%; animation: splat-anim 6.4s infinite;} .splat span:nth-child(17){left:85%; top:45%; animation: splat-anim 5.9s infinite;} .splat span:nth-child(18){left:90%; top:55%; animation: splat-anim 7.0s infinite;} .splat span:nth-child(19){left:95%; top:25%; animation: splat-anim 4.0s infinite;} .splat span:nth-child(20){left:100%; top:85%; animation: splat-anim 8.2s infinite;} @keyframes splat-anim { 0% { opacity:0.0; transform: scale(0);} 10% { opacity:0; transform: scale(0);} 14% { opacity:0.3; transform: scale(0.4);} 15% { opacity:0; transform: scale(0);} 30% { opacity:0; transform: scale(0);} 34% { opacity:0.2; transform: scale(0.8);} 35% { opacity:0; transform: scale(0);} 40% { opacity:0; transform: scale(0);} 44% { opacity:0.2; transform: scale(0.2);} 45% { opacity:0; transform: scale(0);} 50% { opacity:0; transform: scale(0);} 54% { opacity:0.2; transform: scale(0.5);} 55% { opacity:0; transform: scale(0);} 64% { opacity:0; transform: scale(0);} 70% { opacity:0.1; transform: scale(1.0);} 71% { opacity:0; transform: scale(0);} 100% { opacity:0; transform: scale(0);} }