https://jsfiddle.net/y07acobu/1/
@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>