关键帧动画触发整页下移问题排查求助

问题分析 #

你遇到的两个核心问题：

• 图片动画拉动页面下移：虽然transform本身不影响文档流，但图片加载时高度未确定、容器高度依赖内部元素，导致动画过程中浏览器触发重排，页面高度出现波动。
• 动画结束后滚动条不在顶部：页面存在高高度元素（比如那个100rem的圆形区块），动画过程中浏览器的滚动位置被干扰，最终停在非顶部位置。

解决方案 #

1. 固定布局，彻底避免动画影响页面结构

给图片容器设置固定高度+绝对定位，让图片在容器内部独立动画，完全不干扰外部布局：

修改你的CSS代码：

.center-div {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 根据图片实际高度设置固定容器高度，比如图片高20rem的话，总高度=20+7+7=34rem */
  height: 34rem;
  position: relative;
  overflow: hidden; /* 防止动画时图片超出容器范围 */
}
.center-div img {
  width: 40rem;
  position: absolute;
  /* 用forwards确保动画结束后保持最终状态 */
  animation: transitionIn 1s forwards;
}
/* 其余CSS代码保持不变 */

2. 动画结束后强制滚动到顶部

即使布局稳定，页面过长仍可能导致滚动条偏移，在React中监听动画结束事件，强制将页面滚动到顶部：

修改你的React组件代码：

import React, { useEffect, useRef } from "react";
import tenGreenLogo from "../images/10Green Logo Black (1).png";
import "./HomeContent.css";

function HomeContent() {
  const imgRef = useRef(null);

  useEffect(() => {
    const handleAnimationEnd = () => {
      // 立即滚动到页面顶部，无过渡动画
      window.scrollTo({ top: 0, behavior: "instant" });
    };

    const imgElement = imgRef.current;
    if (imgElement) {
      imgElement.addEventListener("animationend", handleAnimationEnd);
      // 组件卸载时移除监听，避免内存泄漏
      return () => imgElement.removeEventListener("animationend", handleAnimationEnd);
    }
  }, []);

  return (
    <>
      <div className="center-div">
        <img ref={imgRef} src={tenGreenLogo} alt="10Green Logo" />
      </div>
      <div className="globe-div">
        <div className="globe"></div>
      </div>
    </>
  );
}

export default HomeContent;

可选优化：初始隐藏滚动条提升体验

如果页面加载时就出现滚动条，可先隐藏，动画结束后恢复：

/* 在全局CSS中添加 */
body {
  overflow: hidden;
}

然后在handleAnimationEnd函数中添加：

document.body.style.overflow = "auto";

为什么之前的尝试无效？ #

你之前仅将动画属性应用在图片或父容器，但未限制容器高度，也未主动处理滚动位置。transform不改变文档流，但容器高度依赖内部元素时，图片加载的高度变化仍会触发页面重排，导致页面下移。

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