打造丝滑滚动体验:Scroll-driven Animations 正式上线!

🌀 打造丝滑滚动体验:Scroll-driven Animations 正式上线!

🚨 告别 JS 手动监听滚动条,CSS 新能力让你用两行代码实现高级滚动动效。

🔍 什么是 Scroll-driven Animations?

Scroll-driven animations(基于滚动的动画)是 CSS Animation 最新草案的一部分。它允许你直接在 CSS 中根据页面滚动进度驱动动画,无需 JavaScript

由 Chrome 团队推动,目前已在 Chromium 系浏览器中可用(Chrome 115+)。

🎯 为什么值得关注?

传统方式 Scroll-driven Animations
监听 scroll 事件 + 手动计算 ✅ CSS 声明式写法
使用 JS 设置 transform/style ✅ 浏览器原生优化
滚动与动画不同步、卡顿问题 ✅ 完美同步、硬件加速

✅ 性能更好 ✅ 写法更简洁 ✅ 更可组合


🧪 实战示例:滚动时淡入卡片列表

🖼️ 直接先上效果图!

💡 具体

html 复制代码
<!-- HTML -->
<section class="container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</section>
css 复制代码
// css 

@keyframes fade-in {  
	from { opacity: 0; transform: translateY(30px); }  
	to   { opacity: 1; transform: translateY(0); }
}
.section {  
	animation-name: fade-in;
	// 核心实现部分!
	animation-timeline: view();
	animation-range: entry 0% cover 30%;
	animation-fill-mode: both;
}

.card {
  opacity: 0;
  transform: translateY(40px);
  animation-name: fade-in;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-fill-mode: both;
  animation-duration: 1s;
 }

🧠 核心知识点拆解

animation-timeline: view();

绑定当前元素可见区域与滚动相关的时间线。

animation-range

控制动画触发的起始与结束时机:

text 复制代码
entry 0%       // 元素开始进入视口的时刻
cover 30%      // 元素在视口中显示 30% 的时刻

animation-fill-mode: both

确保动画前后状态都保留,避免一闪而过。

🔍 浏览器会根据 .card 元素进入视口的进度,平滑播放动画。

📦 更多时间线类型

cssanimation-timeline: scroll(root block); 用于绑定整个滚动区域(类似 parallax 效果)。 cssanimation-timeline: view(); 用于绑定单个元素进入/离开视口的过程。-

🌐 浏览器兼容性

浏览器 支持情况
✅ Chrome 完整支持(115+)
✅ Edge 支持
🔶 Safari 正在开发中
❌ Firefox 尚未支持

📚 延伸阅读

✨ 总结

Scroll-driven Animations 正式宣告: 滚动动画进入声明式时代 。 你再也不需要手动写 scroll 监听器,也无需用 JS 操作样式。 只需几行 CSS,就能实现视差滚动、延迟加载、进度动画等视觉效果。

赶紧打开 Chrome DevTools 开始尝试吧,下一代动效方案,你准备好了吗?

👍 如果你觉得这篇文章有帮助,欢迎点赞、收藏,让更多人了解 CSS 的新能力!

相关推荐
王ASC1 小时前
禁止浏览器自动填充密码的方法
html
qq_510351593 小时前
vw 和 clamp()
前端·css·html
我的写法有点潮5 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
Mo_jon5 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
写不出来就跑路8 小时前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html
我的写法有点潮9 小时前
Scss 的四种导入方式你都知道吗
前端·css
叶玳言21 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
Gazer_S21 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
蔗理苦21 小时前
2025-09-04 HTML1——环境配置与简介
css·vscode·html
一只小阿乐21 小时前
Html重绘和重排
前端·html