css 想让文字在滚动时逐渐浮现动画怎么办_利用 opacity 和 translateY keyframes

滚动浮现动画需用 IntersectionObserver 触发 CSS 类添加，@keyframes 定义 opacity 0→1 和 translateY(20px)→0，配合 forwards 保持终态，避免内联样式覆盖、动画名错误或父容器 overflow 隐藏导致失效。

css 想让文字在滚动时逐渐浮现动画怎么办_利用 opacity 和 translateY keyframes 第1张

用 `@keyframes` 控制 opacity 和 translateY 实现滚动浮现

滚动时文字逐渐浮现，本质不是“自动触发”，而是结合 IntersectionObserver 或滚动监听 + CSS 动画类切换。纯 CSS 无法感知滚动位置，必须靠 JS 判断元素是否进入视口，再添加动画类。

关键点：动画本身用 @keyframes 定义，但「何时播放」由 JS 控制。否则所有元素一加载就动，或完全不动。

opacity 从 0 → 1 控制透明度渐显
transform: translateY() 从 20px → 0 避免文字突兀跳入（比 translateY(0) 更自然）
动画需设 forwards，否则结束后会回退到初始状态

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease-out forwards;
}

用 `IntersectionObserver` 触发动画类添加

比 window.addEventListener('scroll') 性能更好，避免频繁重排重绘。只在元素进入视口时加类，且可设 threshold 控制触发时机（如 0.1 表示 10% 进入即触发）。

每个目标元素只监听一次，首次进入后可调用 unobserve() 防止重复执行
若需「反复进出都动画」，去掉 unobserve()，但要加判断避免重复添加类
注意：Safari 旧版本需 polyfill，IntersectionObserver 在 iOS 12.2+ 原生支持

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in-up');
      observer.unobserve(entry.target); // 只触发一次
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.js-fade').forEach(el => observer.observe(el));

常见失效原因：CSS 动画不播放

即使 JS 正确添加了类，动画也可能不执行。最常踩的坑是：

立即学习“前端免费学习笔记（深入）”；

元素已有 opacity: 0 和 transform: translateY(20px) 内联样式，覆盖了 class 中的初始值 → 移除内联样式，或用 !important（不推荐），优先改结构
动画名拼错，比如写成 fadeInup 而非 fadeInUp → 检查控制台是否有 Invalid property value 类警告
未设置 animation-fill-mode: forwards → 动画播完立刻回退，看起来像没动
父容器有 overflow: hidden 且元素初始位置在裁剪区外 → 确保 translateY(20px) 不被截断，或临时加 margin-top: -20px 协助定位