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

苏承栈

2026-10-12 • 👁 0人浏览过

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

@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 正确添加了类，动画也可能不执行。最常踩的坑是： elasticsearch-9.4.0 win PHP中文网提供Elasticsearch 9.4.0 Windows 版本压缩包下载解压即用，内置 OpenJDK 无需额外配置 Java 环境。该版本重磅推出原生 Prometheus 支持、正式版 Elastic Workflows 以及基于 NVIDIA cuVS 的 GPU 加速向量索引，大幅提升 AI 检索与可观测性能力。建议前往官网下载，快速体验极速搜索与强大的数据分析功能。下载立即学习 “ 前端免费学习笔记（深入） ”；元素已有

opacity: 0

和

transform: translateY(20px)

内联样式，覆盖了 class 中的初始值 → 移除内联样式，或用

!important

（不推荐），优先改结构动画名拼错，比如写成

fadeInup

而非

fadeInUp

→ 检查控制台是否有

Invalid property value

类警告未设置

animation-fill-mode: forwards

→ 动画播完立刻回退，看起来像没动父容器有

overflow: hidden

且元素初始位置在裁剪区外 → 确保

translateY(20px)

不被截断，或临时加

margin-top: -20px

协助定位移动端适配与性能注意点在 iOS Safari 或低端安卓机上，

transform

和

opacity

是唯二能硬件加速的属性。其他如

height

、

margin

触发动画会卡顿。务必用

transform: translateY()

，不要用

top

或

margin-top

避免同时对大量元素启用 observer，可加防抖或分批 observe 若页面内容极长，考虑用

rootMargin

扩大触发区域（如

'100px'

），让动画提前开始，减少“追着滚条跑”的感觉测试真机：模拟器常掩盖渲染延迟，iOS 上尤其要注意

will-change: transform

的滥用（仅在必要时加）动画真正起效的临界点，往往卡在「JS 判断进视口」和「CSS 动画定义是否可被继承/覆盖」这两处。前者看 observer 配置，后者看开发者工具里 computed 样式里

animation

是否生效——别只盯着元素面板里的 class。

相关文章