

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

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

[code]

    @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);
      }
    }
[/code]

[code]

    <div id="wrap">
      <div class="">
        <div class="slideFirst">
          <!-- スライド左へ -->
          <p class="logo">最初に見えるテキストテキスト</p>
        </div>
        <div class="slideSecond">
          <!-- スライド左へ -->
          <p class="txt">スライド後に見えるテキスト</p>
        </div>
      </div>
    </div>
[/code]


CC BY-SA 4.0
2015-06-09T05:08:05.577
11156
2019-12-13T18:35:40.833
2019-12-13T18:35:40.833
32986
8745
question
jquery css
css3 アニメーションで左にスライドして次の要素を見せるには？


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

[code]

    @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);
      }
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-06-09T07:34:06.807
11170
2015-06-09T07:34:06.807
3516
11156
answer