如何用CSS实现H1加载时从底部隐藏位置向上过渡动画

需求：页面加载时通过CSS transition实现H1元素从容器底部隐藏位置向上平滑显示，同时保持外层bounding容器高度固定。

实现思路 #

核心是利用CSS transition监听transform属性变化，结合React组件挂载后的状态切换触发动画：

1. 给bounding容器保留固定高度和overflow: hidden，确保容器高度不变且隐藏超出部分
2. 初始状态让H1元素通过transform: translateY(100%)完全隐藏在容器底部
3. 给H1添加transition属性配置动画效果
4. React组件挂载完成后，通过添加类切换H1的transform值为translateY(0)，触发过渡动画

修改后的完整代码 #

JSX 代码

import { useEffect } from "react";
import "./styles.css";

export default function App() {
  useEffect(() => {
    const headingElem = document.querySelector(".boundingelem");
    if (headingElem) {
      headingElem.classList.add("active");
    }
  }, []);

  return (
    <div className="App" id="heading">
      <div className="bounding">
        <h1 className="boundingelem">Product</h1>
      </div>
    </div>
  );
}

CSS 代码

.App {
  font-family: sans-serif;
  text-align: center;
  font-size: 9vw;
  text-transform: uppercase;
  font-weight: 900;
  line-height: 1;
}
.bounding {
  width: fit-content;
  background-color: orange;
  overflow: hidden;
  height: 150px; /* 固定高度保持不变 */
  margin: 0 auto; /* 可选：让容器居中 */
}
.bounding .boundingelem {
  margin: 0; /* 清除H1默认margin，避免位置偏移 */
  transform: translateY(100%); /* 初始状态：完全隐藏在容器底部 */
  transition: transform 0.6s ease-out; /* 配置过渡动画的时长和曲线 */
  position: relative; /* 让伪元素基于H1定位，保留原有效果 */
}
.bounding .boundingelem.active {
  transform: translateY(0); /* 动画完成后回到正常位置 */
}
.bounding .boundingelem::before {
  content: "Product";
  position: absolute;
  color: white;
  top: -4px;
  left: -4px;
  -webkit-text-stroke: 2px red;
}

方案优势 #

• 性能最优：使用CSS transform属性触发动画，浏览器会进行硬件加速，动画流畅无卡顿
• 容器高度稳定：bounding容器的固定高度和overflow: hidden确保其尺寸不受动画影响
• 无闪烁问题：初始状态元素完全隐藏在容器外，不会出现页面加载时的短暂闪烁
• 兼容性好：transition和transform属性支持所有现代浏览器，无需额外polyfill

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