CSS and JS Infinite Animation

Posted on : 21st July 2022 | Author : @ByDev24
						<div class="code-container">
	<div class="balls">
		<span class="ball"></span>
	</div>
	<div class="stairs"></div>
</div>
					
						.code-container {
    width: 450px;
    max-width: 100%;
    padding: 10px 10px 10px 0px;
    box-shadow: 0px 0px 10px #0000000d;
    border-radius: 10px;
    height: 400px;
	overflow:hidden;
	position: relative;
}
.stairs {
    width: 200px;
    height: 20px;
    background: #b7b7b7;
    border-radius: 0 5px 5px 0;
    transform: rotate(3deg);
    transform-origin: left;
}
.balls {
    margin-top: 70px;
    display: flex;
    column-gap: 3px;
}

span.ball {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #e13939;
    border-radius: 50%;
    transition-duration: 0.6s;
    transition-delay: 0.2s;
	animation: fall 4s forwards cubic-bezier(0.4, 0, 1, 1);
	position: absolute;
}
@keyframes fall{
	0%{transform:translateY(-150px)}
	20%{transform:translateY(-30px)}
	50%{transform:translateY(-20px) translateX(160px)}
	60%{transform:translateY(-20px) translateX(190px)}
	70%{transform:translateY(-20px) translateX(210px)}
	75%{transform:translateY(0px) translateX(240px)}
	100%{transform:translateY(350px) translateX(300px)}
}
					
						//Add new ball
var colorArray = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
		  '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
		  '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 
		  '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
		  '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', 
		  '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
		  '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', 
		  '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
		  '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', 
		  '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];
setInterval(function(){
	var selectedColor = Math.floor(Math.random() * colorArray.length)
	var newBall = '<span class="ball" style="background:'+colorArray[selectedColor]+'"></span>';
	document.querySelector(".balls").insertAdjacentHTML('afterbegin', newBall)
},1000);

setTimeout(function(){
    setInterval(function(){
        let totalBalls = document.getElementsByClassName("ball").length
        document.getElementsByClassName("ball")[totalBalls-1].remove()
    },1000);
},5000);
					

Output

More Snipps