css - ページ読み込み時の CSS3 スライド アウト アニメーション

Question

ページが純粋に CSS を使用して読み込まれたときに、画像を左にスライドさせようとしています。

だから、私が持っている限り：http://jsfiddle.net/o7thwd/qZbhJ/そしてそれはうまくいくようです。私が乗り越えられないように見える問題は、アニメーションが終了したときに画像がどのように表示されるかです。

#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;
    }
}

最初のページ読み込み時のように、左に折りたたんだままにするにはどうすればよいですか?