Untitled

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
	#d1
	{
		width: 100px;
		height: 100px;
		border: solid 4px black;
		background-color: green;
		color: white;
		text-align: center;
		padding: 10px;
		animation-name: anima;
		animation-duartion: 12s;
		animation-timing-function: ease-in;
		animation-iteration-count: infinite;
	}
	@keyframes anima
	{
		0% {background-color: red;}
		50% {background-color: blue;}
		100% {width: 200px;}
	}
	</style>
</head>
<body>
	<div id="d1">HALO</div>
</body>
</html>