@keyframes grow-and-shrink {
	0%		{transform: scale(0);}
	100%	{transform: scale(1);}
}

@keyframes pulse{
	0%	{transform: scale(1);}
	50%	{transform: scale(3);}
	0%	{transform: scale(1);}
}
    
body {
    animation: change-background 4s linear infinite;
}
  

div {
	animation-name: grow-and-shrink;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction:alternate-reverse;
}

* {
	margin: 0;
	padding: 0;
}

body{
	background-color: rgb(0, 0, 255);
}

div{
	background-color: #ff7f00;
	width: 157px;
	height: 157px;
	border-radius: 100%;
}

.one{
	float: left;
	animation: pulse 3s ease-in-out infinite;
}
.two{
	float: left;
	animation-delay: 0.12s;	
	animation: pulse 2s ease-in-out infinite;
}
.three{
	float: left;
	animation: pulse 1s ease-in-out infinite;
	animation-delay: 0.24s;	
}
.four{
	float: right;
	margin-top: 314px;	
	animation: pulse 4s ease-in-out infinite;
	animation-delay: 0.36s;
}
.five{
	float: right;
	animation: pulse 2s ease-in-out infinite;
	animation-delay: 0.48s;
}
.six{
	float: right;
	animation: pulse 3s ease-in-out infinite;
	animation-delay: 1.8s;
}

.seven{
	float: left;
	margin-top: 150px;
	animation: pulse 4s ease-in-out infinite;
	animation-delay: 0.7s;
}

.eight{
	float: left;
	margin-top: 250px;
	animation: pulse 2.5s ease-in-out infinite;
	animation-delay: 0.2s;
}

.nine{
	margin-top: 350px;
	float: right;
	animation: pulse 3.2s ease-in-out infinite;
	animation-delay: 1s;
}