Background is shaking in transition
I have optimized the code and considered the use of left/right to define the size of the element then changed the width transition with a translation.
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>