@keyframes rotate{
	0%		{transform: rotate(0deg);}
	100% 	{transform: rotate(360deg);}

	/*0%		{opacity: 0; height: 0;}
	50%		{opacity: .5}
	75%		{opacity: .75}
	100%	{opacity:1; height:1;}*/
}
body{
	background-color: lightgoldenrodyellow;
	top: 50vh;
}
main{
	margin-left: 15vw;
	margin-top: 30vh;
}
section{
	width: 300px;
	height: 300px;
	transition: transform 2s;
	animation: rotate 1s infinite;
	float: left;
	animation-timing-function: linear;
	top: 50vh;
	
}
/*can use odd/even instead of (1)
- use another pseudotransition LIKE hover + add transition #s*/

section:nth-child(1):hover{
	background-color: brown;
	transform: rotate(360deg);
	border-radius: 50%;
	animation-delay: .2s;

}
section:nth-child(2):hover{
	background-color: brown;
	transform: rotate(360deg);
	border-radius: 50%;
	animation-delay: .4s;
	/*0 makes it dissapear 1 is 100%*/
}
section:nth-child(3):hover{
	background-color: brown;
	transform: rotate(360deg);
	border-radius: 50%;
	animation-delay: .6s;
}
section:nth-child(4):hover{
	background-color: brown;
	transform: rotate(360deg);
	border-radius: 50%;
	
	/*translate3d(10px, 10px, 10px)*/
}
section:nth-child(5):hover{
	background-color: brown;
	transform: rotate(360deg);
	border-radius: 50%;
}
section:nth-child(6):hover{
	background-color: brown;
	transform: rotate(360deg);
	border-radius: 50%;
}