div refuses to slide from the right

so i have two div who take 50% of the screen each (one takes the left side, the other one takes the right side).

I want the left div to slide from left to right and the right div to slide from right to left

the probleme is both of them slide from the left to the right.

i made a codepen to show what happend

https://codepen.io/azciop/pen/LYdmXZJ

html

<article class="aboutMe">
          <div class="animation-about1"></div>
          <span class="animation-about2"></span>
        </article>

.animation-about1 {
  position: fixed;
  background-color: #990606;
  display: inline-block;
  width: 50%;
  height: 800px;
  left: -50%;
  -webkit-animation: slide-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.animation-about2 {
   position: fixed;
  background-color: #990606;
  display: inline-block;
  height: 800px;
  width:  50%;
 
  -webkit-animation: slide-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-left 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

>Solution :

If you think about the final position you want the elements to be in it is left 0px for the first one and right 0px for the second one.

Remember that a translate with a % moves the element by a % of its own width, not by the width of its container.

This snippet positions the first element at left: 0 and the second at right: 0 – that being their final resting places. It translates the first by -100% (so it completely disappears to the left) and the second by 100% (so it completely disappears to the right).

Then the animation that both need is to come to translate of 0.

.animation-about1 {
  position: fixed;
  background-color: #990606;
  display: inline-block;
  width: 50%;
  height: 800px;
  left: 0;
  animation: slide 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  transform: translateX(-100%);
}

.animation-about2 {
  position: fixed;
  background-color: #990606;
  display: inline-block;
  height: 800px;
  width: 50%;
  right: 0;
  animation: slide 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  transform: translateX(100%);
}

@keyframes slide {
  100% {
    transform: translateX(0);
  }
}

<article class="aboutMe">
  <div class="animation-about1"></div>
  <span class="animation-about2"></span>
</article>

Note: I removed the -webit- from the CSS to make things a bit simpler but of course put it back in if you are dealing with old browsers.