@charset "UTF-8";
/* CSS Document */

#square {
	width:200px;
	height:200px;
	background:red;	
}

#square:hover {
	animation:color-animation 3s ease 5;
	
}

@keyframes color-animation {
	0% {
		background:red;	
	}
	
	20% {
		background:orange;	
	}
	
	40% {
		background:blue;	
	}
	
	60% {
		background:purple;	
	}
	
	80% {
		background:pink;	
	}
}

#pie a {
	background:#FFF0F5;
	color:#F808080;
	/* transitions area applied to a instead of a:hover so that transitions will work with other pseudo-classes of a */
	
	/* transition-property: background, color; */
	/* transition-property:12s;	*/
	
	/* simplified and with browser prefixes */
	-moz-transition: all 6s;
	-web-kit-transition: all 6s;
	-o-transition: all 6s;
	-ms-transition: all 6s;
	transition: all 6s;
}

#pie a:hover {
	background:#FFB6C1;
	color:#778899;	
}

#cake a {
	background:#FFF0F5;
	color:#F808080;
	-moz-transition:all 6s ease;
	-web-kit-transition: all 6s ease;
	-o-transition: all 6s ease;
	-ms-transition: all 6s ease;
	transition: all 6s ease;
}

#cake a:hover {
	background:#FFB6C1;
	color:#778899;		
}


#ice-cream a {
	background:#FFF0F5;
	color:#F808080;	
	/* could also use: transition-delay .5s */
	-moz-transition:all 6s ease .5s;
	-web-kit-transition: all 6s ease .5s;
	-o-transition: all 6s ease .5s;
	-ms-transition: all 6s ease .5s;
	transition: all 6s ease .5s;
}

#ice-cream a:hover {
	background:#FFB6C1;
	color:#778899;			
}