#circle {
	width:300px;
	height:300px;
	background-color:purple;
	border-radius:300px;
	margin:25px auto 25px auto;
	color:white;

	/*-webkit-transition:width 1s, height 1s, margin-top 1s, margin-bottom 1s, line-height 1s, font-size 1s;*/
	-webkit-animation-name:spin;
	-webkit-animation-duration:3s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform:rotate(0deg);

	text-align:center;
	line-height:300px;
	font-size:20px;
	font-weight:bold;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

#circle:hover {
	/*width:350px;
	height:350px;
	margin-top:0;
	margin-bottom:0;
	line-height:350px;
	font-size:25px;*/
	-webkit-animation: spin 3s linear, pulse 1s linear;
	/*-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: linear;*/
	-webkit-animation-iteration-count: infinite;
	cursor:pointer;
}

@-webkit-keyframes spin {
	0% {background-color:red; -webkit-transform:rotate(0deg);}
	16% {background-color:orange;}
	33% {background-color:yellow;}
	50% {background-color:green;}
	66% {background-color:blue;}
	83% {background-color:purple;}
	100% {background-color:red; -webkit-transform:rotate(360deg);}
}

@-webkit-keyframes pulse {
	0% {width:300px; height:300px; margin-top:25; margin-bottom:25; line-height:300px; font-size:20px;}
	50% {width:350px; height:350px; margin-top:0; margin-bottom:0; line-height:350px; font-size:25px;}
	100% {width:300px; height:300px; margin-top:25; margin-bottom:25; line-height:300px; font-size:20px;}
}