Can't stop animation at end of one cycle

I'm making a CSS animation at the minute, and in it I'm moving stuff and want it to stay at the end position until the user moves their mouse away.

body {
	background: url('osx.jpg');
	padding: 0;
	margin: 0;
	line-height: 60px;
}

@-webkit-keyframes item1 {
	0% { bottom: -120px; left: 0px; }
	10% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
	100% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
    }

@-webkit-keyframes item2 {
	0% { bottom: -120px; left: 0px; }
	10% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
	100% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
}
	
@-webkit-keyframes item3 {
	0% { bottom: -120px; left: 0px; }
	10% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
	100% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
}

    div {
	position: relative;
    }
#folder {
	width: 120px;
	margin: 0px auto;
}

#folder > div {
	position: absolute;	
}

#folder:hover > div:nth-of-type(1) {
	-webkit-animation-name: item1;
	-webkit-animation-duration: 10s;
}

#folder:hover > div:nth-of-type(2) {
	-webkit-animation-name: item2;
	-webkit-animation-duration: 10s;
}

#folder:hover > div:nth-of-type(3) {
	-webkit-animation-name: item3;
	-webkit-animation-duration: 10s;
}

Whenever the animation ends though, it just repeats itself. I only want it to happen once and stay where it is until the user moves away. I tried using the paused thing from the spec but it doesn't work as I'd expect it to. Any help is appreciated. Thanks. :)

The following comment worked for me. Thanks michael

"You need to add the fill-mode to freeze the animation state at the end of the animation.

-webkit-animation-fill-mode: forwards;

forwards leaves the animation in the state of the last frame

backwards leaves the animation at the start

Just in case your animation still resets to the first frame, be careful with the order in which you declare the css:

This is working fine:

    animation: yourAnimationName 1s;
	animation-fill-mode: forwards;

This won't (reset to first frame):

	animation-fill-mode: forwards;
    animation: yourAnimationName 1s;

Tricky!

If I understand the question correctly, it sounds like you need to set the iteration to '1'.

-webkit-animation-iteration-count: 1;

The css3 animations reset to the default style at the end of the animation. You can try something with javascript:

You can add an eventListener to your animation, retrieve the styles you wish to keep, apply them manually and remove the animation.

document.getElementById('yourdiv').addEventListener(
	'webkitAnimationEnd',
	function(){
		document.getElementById('yourdiv').style.backgroundPosition = '0px 0px';
		document.getElementById('yourdiv').style.webkitAnimationName = 'none';
	}, 
	false
);

try this:

-webkit-animation-duration: 10s, 10s;

:)