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

#donut {
	/* call is, length, ease, number of times (could be infinite) */
	-moz-animation: donut-animation 10s ease-in-out 3;
	-webkit-animation: donut-animation 10s ease-in-out 3;
	-o-animation: donut-animation 10s ease-in-out 3;
	animation: donut-animation 10s ease-in-out 3;
	
	/* another way to do this without the short cuts */
	/* gets really long with all the prefixes */
	/*
	-moz-animation-name:donut-animation;
	-moz-animation-duration:10s;
	-moz-animation-timing-function:ease-in-out;
	-moz-animation-iteration-count:3; 
	*/
	
	/* Animation Fill Mode */
	/* backward - begins at first keyframe */
	/* forward - ends at last keyframe; */
	/* both - does both */
	-moz-animation-fill-mode:backward;
	-webkit-animation-fill-mode:backward;
	-o-animation-fill-mode:backward;
	animation-fill-mode:backward;
	
	/* Animation Direction */
	/* normal - first keyframe to last keyframe */
	/* reverse - last to first keyframe */
	/* alternate - goes from first to last, then the next time goes from last to first keyframe */
	/* alternate-reverse - goes from last to first, then the next time goes from first to last keyframe */
	-moz-animation-direction:alternate;
	-webkit-animation-direction:alternate;
	-o-animation-direction:alternate;
	animation-direction:alternate;
}

@-moz-keyframes donut-animation {
	0% {
		-moz-transform:translate(0px,0px);	
	}
	
	25% {
		-moz-transform:translate(400px,0px);
	}
	
	50% {
		-moz-transform:translate(400px,400px);	
	}
	
	75% {
		-moz-transform:translate(0px,400px);
	}
	
	100% {
		-moz-transform:translate(0px,0px);	
	}
}

@-webkit-keyframes donut-animation {
	0% {
		-webkit-transform:translate(0px,0px);		
	}
	
	25% {
		-webkit-transform:translate(400px,0px);
	}
	
	50% {
		-webkit-transform:translate(400px,400px);	
	}
	
	75% {
		-webkit-transform:translate(0px,400px);	
	}
	
	100% {
		-webkit-transform:translate(0px,0px);		
	}
}

@-o-keyframes donut-animation {
	0% {
		-o-transform:translate(0px,0px);	
	}
	
	25% {
		-o-transform:translate(400px,0px);
	}
	
	50% {
		-o-transform:translate(400px,400px);	
	}
	
	75% {
		-o-transform:translate(0px,400px);
	}
	
	100% {
		-o-transform:translate(0px,0px);	
	}
}

@keyframes donut-animation {
	0% {
		transform:translate(0px,0px);		
	}
	
	25% {
		transform:translate(400px,0px);
	}
	
	50% {
		transform:translate(400px,400px);	
	}
	
	75% {
		transform:translate(0px,400px);
	}
	
	100% {
		transform:translate(0px,0px);	
	}

}

/* Animation Play State - specifies if the animation is running or not */
button {
	-moz-animation-play-state:paused;
	-webkit-animation-play-state:paused;
	-o-animation-play-state:paused;
	animation-play-state:paused;
	
}

button:hover {
	-moz-animation-play-state:running;
	-webkit-animation-play-state:running;
	-o-animation-play-state:running;
	animation-play-state:running;	
}