如何避免CSS关键帧动画导致文本及按钮元素移位？

问题说明 #

给顶部区域容器添加背景图缩放动画后，容器内的标题、文本、按钮等元素会随背景图一同移位，需要实现仅背景图执行缩放动画，内容保持固定不动的效果。

修改方案 #

1. 调整HTML结构 #

在.static-slider-head容器内新增一个专门承载背景图的子容器，将背景相关逻辑从父容器剥离：

<div className="static-slider-head banner2">
  <!-- 新增背景容器 -->
  <div class="bg-container"></div>
  <Container>
    <Row className="">
      <Col lg="6" md="6" className="align-self-center intro">
        <h1 className="title">
          Welcome
        </h1>
        <h4 className="subtitle font-light">
        Filler Text
        </h4>
        <a
          href="/"
          className="btn btn-danger m-r-20 btn-md m-t-10 "
        >
          Filler Text
        </a>
        <a
          href="/"
          className="btn btn-success m-r-20 btn-md m-t-10 " target="_blank"
        >
          Filler Text <i className="fa fa-instagram"></i> 
        </a>
      </Col>
      <Col lg="6" md="6">
      </Col>
    </Row>
  </Container>
</div>

2. 重构CSS代码 #

将背景图、动画逻辑转移到新增的背景容器，父容器改为相对定位并承载内容层级：

.static-slider-head {
  min-height: 36.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 0;
  background-color: #e5e5e5;
  overflow: hidden;
  /* 设置相对定位，作为子元素绝对定位的参考容器 */
  position: relative;

  .title {
    color: $white;
    font-weight: 700;
    font-size: 70px;
    line-height: 100px;
  }
  .subtitle {
    color: $white;
    line-height: 30px;
  }

  /* 确保内容容器在背景上层 */
  > .container {
    position: relative;
    z-index: 1;
  }
}

/* 背景容器样式 */
.bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('../../public/top2.png') center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  /* 给背景容器单独添加缩放动画 */
  animation: scale 10s;
  animation-fill-mode: forwards;
  transform-origin: bottom right;
}

@keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

原理说明 #

• 父容器.static-slider-head设置position: relative，作为绝对定位元素的参考容器，同时通过overflow: hidden裁剪背景图缩放后的超出部分。
• 新增的.bg-container设置为绝对定位，占满父容器，专门承载背景图和缩放动画，不会影响父容器内的其他内容。
• 内容容器（Container）设置z-index: 1，确保在背景图上层显示，完全不受背景动画的影响。

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