css3 アニメーションで左にスライドして次の要素を見せるには？
css3 アニメーションで左にスライドして押し出すようにして、次の要素を見せたいのですが文字が重なってうまくいきません。
.slideFirstを左にスライド(left:0→left:-300px）すると、控えていた.slideSecond(left:300px→left:0）もスライドして見せたい。
外側の#wrapは width:300pxの為、.slideSecondは見えていない状態にしたい。
文字が重なって横並びで控えている状態にはなりません。どこをどのようにしたらよいでしょうか。ご教示の程よろしくお願いいたします。
また、jQueryではなく、css3アニメーションでなんとか出来ないでしょうか？