stoppare esecuzione animazione

[Peppe psp]

salve, stavo studiando le animazioni con CSS3, partendo da un semplice esempio ho creato un div con id #box e gli ho assegnato il seguente css

#box {
	width:50%;
	height:50%;
	background:red;
	color:#FFFFFF;
	position:relative;
	font-weight:bold;
	font-size:3em;
	padding:10px;
	border-radius:5px;
	animation-name: animation1;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: alternate;
	animation-play-state: running;
	-moz-animation-name: animation1;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: linear;
	-moz-animation-delay: 0s;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: alternate;
	-moz-animation-play-state: running;
}

con @keyframe ho realizzato la seguente animazione

@keyframes animation1 {
	0% {background: red;}
	50% {background: blue;}
	100% {background: orange;}
}
@-moz-keyframes animation1 {
	0% {background: red;}
	50% {background: blue;}
	100% {background: orange;}	
}

normalmente alla fine dell'animazione lo stile del box ritorna quello iniziale cioè lo sfondo dopo essere diventato arancione diventa rosso, io invece vorrei stoppare l'animazione sapendo che dura 10s
ho provato con un ciclo for, ma non sono molto pratico

for (i=0; i<10; i++) {
	document.getElementById('box').style.animationPlayState='paused';
	document.getElementById('box').style.-moz-animationPlayState='paused';

}

ecco la pagina con la referenza dell'animation-play-state
http://www.w3schools.com/cssref/css3...play-state.asp

[Peppe psp]

scusate era

function pause() {
document.getElementById('box').style.animationPlayState='paused';
document.getElementById('box').style.mozAnimationPlayState='paused';
}
setTimeout("pause();", 10000);