Background is shaking in transition

section {
  max-width: 1920px;
  position: relative;
  overflow: hidden;
  height: 500px;
}

.container {
  position: absolute;
  top: 0;
  bottom:0;
  transition:transform 1s linear;
  overflow: hidden;
  transform: skew(20deg);
}

.left {
  left: -60vw; /*to create the overflow*/
  right: calc(55% + 10px); /*10px distance between both element*/
  border-radius: 0 20px 20px 0;
}

.right {
  right: -80vw;
  left: 45%; /*100% - 55% (the right value of .left)*/
  border-radius: 20px 0 0 20px;
}

.left::after,
.right::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  bottom: 0;
  right: -40%;
  transform: skew(-20deg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition:transform 1s linear;
}

.left::after {
  background-image: url(https://cdn.pixabay.com/photo/2018/12/04/22/38/road-3856796__340.jpg);
  transform-origin: bottom;
}

.right::after {
  transform-origin: top;
  background-image: url(https://media.istockphoto.com/photos/taking-a-walk-in-the-woods-picture-id1130258547?s=2048x2048);
}

.right:hover {
  transform: skew(20deg) translateX(-60vw);
}

.right:hover::after {
  transform: skew(-20deg) translateX(60vw);
}

<section>
  <div class="container left"></div>
  <div class="container right"></div>
</section>