CSS动画首尾背景图跳动问题求助（transform/transition）

问题原因与修复方案 #

核心问题 #

• 绝对定位的背景图services-back-image没有相对定位的父容器，导致它以整个文档为定位基准，而非父元素.services-home。父元素缩放时，背景图的定位逻辑冲突，引发瞬间跳转。
• 背景图自身有独立的变换属性，和父元素的缩放变换叠加时，会出现计算错位。

修复步骤 #

1. 给父元素.services-home添加position: relative，让内部绝对定位元素以它为定位基准。
2. 将背景图的初始缩放和变换基准移到父元素上，统一控制所有元素的变换，避免双重变换冲突。

修改后的代码 #

CSS 代码

.index {
  text-align: center;
  display: block;
}

.services-back-image {
  z-index: -2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 250ms;
}

.services-home {
  z-index: -1;
  text-align: left;
  width: 100%;
  height: 40vw;
  transition: all 250ms;
  position: relative; /* 设置相对定位作为子元素定位基准 */
  transform: scaleY(0.5); /* 把背景图的初始缩放移到父元素 */
  transform-origin: 40% 0%; /* 变换基准统一放在父元素 */
}

.services-home:hover {
  transform: scaleY(0.5) scale(1.1); /* 叠加hover缩放效果 */
}

HTML 代码（无需改动）

<div class="services-home p-5">
  <img class="services-back-image" src="/SVG/Asset 8.svg" alt="oops">
  <br>
  <h1 class="px-4 pt-4">Our Services</h1>
  <p class="px-4" style="color: darkslategray;">Click to Learn More!</p>
</div>

补充说明 #

• 统一父元素的变换逻辑后，内部所有元素（包括背景图）会同步缩放，不会出现错位。
• 给背景图设置宽高100%，确保它始终铺满父容器，避免缩放时出现空白或溢出。

内容的提问来源于stack exchange，提问作者tobyallwood