.falling-images { position: relative; width: 100%; height: 100vh; } .falling { position: absolute; top: -100px; animation: fall linear infinite; } @keyframes fall { 0% { transform: translateY(-100px); left: calc(100% * var(--random-x)); } 100% { transform: translateY(100vh); left: calc(100% * var(--random-x)); } } /* Randomize animation duration and position */ .falling:nth-child(1) { --random-x: 0.1; animation-duration: 5s; } .falling:nth-child(2) { --random-x: 0.3; animation-duration: 6s; } .falling:nth-child(3) { --random-x: 0.5; animation-duration: 4s; } .falling:nth-child(4) { --random-x: 0.8; animation-duration: 7s; }