2

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>

1 件の回答 1

1

Flexboxを使うとやりやすいと思います。

@charset "utf-8";
/* CSS Document */

.container {
  display: flex;
  /* 横並び、単一行 */
  flex-flow: row nowrap;
  height: 100px;
  background-color: yellow;
}

.left {
  flex: 0 0 auto;
  width: 300px;
  height: 50px;
  background-color: #00ff00;
}

.right {
  flex: 0 0 auto;
  width: 300px;
  height: 50px;
  background-color: #00eeee;
}

#wrap {
  width: 300px;
}
/* animation */

.slide-left {
  -webkit-animation: slide-left 1s ease-in-out 3.0s;
  animation: slide-left 1s ease-in-out 3.0s;
  /* 終了位置を維持 */
  animation-fill-mode: forwards;
}

@keyframes slide-left {
  0% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(-300px, 0px);
  }
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translate(0px, 0px);
  }
  100% {
    -webkit-transform: translate(-300px, 0px);
  }
}
<div id="wrap" class="container">
  <div class="slide-left left">
    <p class="logo">最初に見えるテキストテキスト</p>
  </div>
  <div class="slide-left right">
    <p class="txt">スライド後に見えるテキスト</p>
  </div>
</div>

2
  • @ita_3yさま、お世話になります。早速置き換えて試した所、出来ました!flexはフロートのようなものなんですね。これからiPadやAndroidなどでも検証してみたいと思います。取り急ぎありがとうございました!!
    – kapimako
    Commented 2015年6月9日 8:59
  • @ita_3yさま、Flex-box勉強になりました。safari,chromeともに確認できました。ありがとうございました。m(_ _)m
    – kapimako
    Commented 2015年6月10日 6:22

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。