CSS3 Slide Out Animation on Page Load - css

Question

I am trying to get an image to slide out to the left when the page loads using purely CSS.
So, far I've got: http://jsfiddle.net/o7thwd/qZbhJ/ and it seems to work. The issue I can't seem to get over is how the image comes back into view once the animation is over.
#slide {
left:0;
width:268px;
-moz-animation-name: slideOut;
-moz-animation-iteration-count: once;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 1.5s;
-webkit-animation-name: slideOut;
-webkit-animation-iteration-count: once;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 1.5s;
-o-animation-name: slideOut;
-o-animation-iteration-count: once;
-o-animation-timing-function: ease-out;
-o-animation-duration: 1.5s;
animation-name: slideOut;
animation-iteration-count: once;
animation-timing-function: ease-out;
animation-duration: 1.5s;
}
#-o-keyframes slideOut {
0% {
margin-left: 0;
}
100% {
margin-left: -268px;
}
}
#keyframes slideOut {
0% {
margin-left: 0;
}
100% {
margin-left: -268px;
}
}
#-moz-keyframes slideOut {
0% {
margin-left: 0;
}
100% {
margin-left: -268px;
}
}
#-webkit-keyframes slideOut {
0% {
margin-left: 0;
}
100% {
margin-left: -268px;
}
}
How can I get it to stay folded to the left like it does on initial page load?

Answer 1

basically you add the following CSS -webkit-animation-fill-mode: forwards; and the animation end will be persistent rather than revert back to the original.
WORKING JSFIDDLE
Oh and you only need to use the -webkit- vendor specific for animations there are no -moz- or -o- vendor specifics for animations
CSS:
#slide {
left:0;
width:268px;
-webkit-animation-name: slideOut;
-webkit-animation-iteration-count: once;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 1.5s;
animation-name: slideOut;
animation-iteration-count: once;
animation-timing-function: ease-out;
animation-duration: 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes slideOut {
0% {
margin-left: 0;
}
100% {
margin-left: -268px;
}
}
#-webkit-keyframes slideOut {
0% {
left: 0;
}
100% {
left: -268px;
}
}