How do I slide to the left in the css3 animation to show the next element?

I want to show the following elements by sliding it to the left in the css3 animation, but the characters overlap and it doesn't work.

If you slide .slideFirst to the left (left:0→left:-300px), you will also want to slide the .slideSecond (left:300px→left:0) that you were holding back.
The #wrap on the outside is width:300px, so I want to keep the .slideSecond out of sight.
The characters do not overlap and stand side by side.Where and what should I do?Thank you for your kind instruction.
Also, would it be possible to use css3 animation instead of jQuery?

@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: slideFirst1sease-in-out 3.0s;
  animation —slideFirst1sease-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);
  }
}


/* I want to slide the one on the right to the left*/

.slideSecond{
  - webkit-animation: slideSecond 1sease-in-out 3.0s;
  animation —slideSecond 1sease-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);
  }
}

<divid="wrap">
  <div class="">
    <div class="slideFirst">
      <!--- Slide to the left-->
      <p class="logo"> First visible text</p>
    </div>
    <div class="slideSecond">
      <!--- Slide to the left-->
      <p class="txt">text visible after slide</p>
    </div>
  </div>
</div>

jquery css

2022-09-30 20:51

1 Answers

I think Flexbox is easy to use.

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

US>.container{
  display:flex;
  /* Side by side */
  flex-flow —row nowrap;
  height —100px;
  background-color: yellow;
}

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

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

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

.slide-left{
  - webkit-animation: slide-left 1sease-in-out 3.0s;
  animation —slide-left 1sease-in-out 3.0s;
  /* Maintain end position*/
  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);
  }
}

<divid="wrap" class="container">
  <div class="slide-left left">
    <p class="logo"> First visible text</p>
  </div>
  <div class="slide-left right">
    <p class="txt">text visible after slide</p>
  </div>
</div>

2022-09-30 20:51

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656