Skip to main content
本文に 1822 文字追加
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

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>

@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>

ソース リンク
kapimako
  • 205
  • 5
  • 16

css3 アニメーションで左にスライドして次の要素を見せるには?

css3 アニメーションで左にスライドして押し出すようにして、次の要素を見せたいのですが文字が重なってうまくいきません。

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

https://jsfiddle.net/y07acobu/1/