CSS Animations

by r2creations24

HTML

<div class = "test"> 
        <div class="center">

        </div>
    </div>

CSS

:root {
	--random-bg: blue;
}

html {
	background-color: #004e5c;
	width: 100vw;
	height: 100vh;
}

body {
	color: whitesmoke;
  	background-color: #004e5c;
	display: flex;
  	justify-content: center;
  	align-items: center;
  	text-align: center;
	width: 100%;
	height: 100%;
	margin: auto;
	padding: 0;
}

.center {
	margin: auto;
}

.test {
	position: absolute;
	width: 20%;
	aspect-ratio: 1;
	background-color: white;
	border-radius: 5px;
	animation: color linear 5s infinite, rotate linear 15s alternate-reverse infinite, scalediv ease 5s infinite;

}

@keyframes color {
	0% { background-color: white; }
	50% { background-color: var(--random-bg); }
}

@keyframes rotate {
	from { 
		transform:rotate(0deg);
		border-radius: 5px;
	 }
	to { 
		transform:rotate(359deg);
		border-radius: 128px;
	 }
}

@keyframes scalediv {
	50% { transform:scale(1.25); }
}

JavaScript

setInterval(changeColor, 5000);

	function changeColor(){
		var r = Math.floor(Math.random() * 361);
		var g = Math.floor(Math.random() * 101);
		var b = Math.floor(Math.random() * 101);
		
		var css = document.documentElement;
		css.style.setProperty("--random-bg", "#" + Math.floor(Math.random() * 0xffffff).toString(16));
	}