Untitled

<!DOCTYPE html>
<html>
<head>
	<title></title>

	<style type="text/css">

	/*this is the CSS code which sets the attributes of the div with the id of square-circle*/
		#square-circle{
			width:100px;
			height:100px;
			background-color:lightblue;
			animation-name:change;
			animation-timing-function: ease-in-out;
			animation-duration:2s;
			animation-iteration-count: infinite;
		}


/*below is the name of the animation and then how we make an animation*/

@keyframes change {

	20%{
		background-color: lightblue;
		opacity:1;
		border-radius:0%;
	}

	40%{
		background-color: purple;
		opacity:0.7;
		border-radius:20%;
	}

	60%{
		background-color: purple;
		opacity:0.5;
		border-radius:50%;
	}

	80%{
		background-color: blue;
		opacity:0.7;
		border-radius:25%;
	}
}

	</style>
</head>
<body>

<div id="square-circle">

</div>
</body>
</html>