css3 アニメーションで左にスライドして押し出すようにして、次の要素を見せたいのですが文字が重なってうまくいきません。
.slideFirstを左にスライド(left:0→left:-300px)すると、控えていた.slideSecond(left:300px→left:0)もスライドして見せたい。
外側の#wrapは width:300pxの為、.slideSecondは見えていない状態にしたい。
文字が重なって横並びで控えている状態にはなりません。どこをどのようにしたらよいでしょうか。ご教示の程よろしくお願いいたします。
また、jQueryではなく、css3アニメーションでなんとか出来ないでしょうか?
@charset "utf-8";
/* CSS Document */
#wrap {
width: 300px;
position: relative;
}
.slideFirst {
position: absolute;
left: 0;
top: 10px;
}
.slideSecond {
position: absolute;
top: 10px;
/*left: 300px;*/
/*display: none;*/
}
/* animation */
.slideFirst {
-webkit-animation: slideFirst 1s ease-in-out 3.0s;
animation: slideFirst 1s ease-in-out 3.0s;
}
@keyframes slideFirst {
0% {
transform: translate(0px, 0px);
}
100% {
transform: translate(-300px, 0px);
}
}
@-webkit-keyframes slideFirst {
0% {
-webkit-transform: translate(0px, 0px);
}
100% {
-webkit-transform: translate(-300px, 0px);
}
}
/* 右にあったものを左にスライドさせたい */
.slideSecond {
-webkit-animation: slideSecond 1s ease-in-out 3.0s;
animation: slideSecond 1s ease-in-out 3.0s;
}
@keyframes slideSecond {
0% {
transform: translate(300px, 0px);
}
100% {
transform: translate(0px, 0px);
}
}
@-webkit-keyframes slideLeft {
0% {
-webkit-transform: translate(300px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
}
}
<div id="wrap">
<div class="">
<div class="slideFirst">
<!-- スライド左へ -->
<p class="logo">最初に見えるテキストテキスト</p>
</div>
<div class="slideSecond">
<!-- スライド左へ -->
<p class="txt">スライド後に見えるテキスト</p>
</div>
</div>
</div>