html - 过渡中背景抖动

Question

我有两个 div 元素，它们的宽度可以通过 javascript 上的点击事件来控制。无论是点击事件(切换类名)还是悬停事件，其伪元素的背景图像似乎都在晃动(在 chrome，即 edge 和 safari 上确认)。

我查过 SO 和谷歌，但似乎是改变背景大小本身的问题，这是我在这里没有做的。

section {
	width: 100%;
	max-width: 1920px;
	position: relative;
	min-height: 700px;
	overflow: hidden;
}

.container {
	width: 99%;
	height: 700px;
	position: absolute;
	transition: 1s linear width;
	overflow: hidden;
}

.left {
	top: 0;
	left: 0;
	background: transparent;
	transform: skew(20deg) translateX(-50%);
	border-radius: 0 20px 20px 0;
}

.left::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	width: 100vw;
	transform: skew(-20deg);
	background-image: url(https://cdn.pixabay.com/photo/2018/12/04/22/38/road-3856796__340.jpg);
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.right {
	top: 0;
	right: 0;
	border-radius: 20px 0 0 20px;
	transform: skew(20deg) translateX(50%);
}

.right::after {
	content: "";
	position: absolute;
	top: 0;
	right: 50%;
	height: 100%;
	width: 100vw;
	transform: skew(-20deg);
	background-image: url(https://media.istockphoto.com/photos/taking-a-walk-in-the-woods-picture-id1130258547?s=2048x2048);
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.right:hover {
	width: 250%;
}

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

Answer 1

我优化了代码并考虑使用左/右来定义元素的大小然后通过平移更改宽度过渡。

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>