HTML怎么用CSS滚动驱动动画_html scroll-driven动画新特性【深度解析】-html教程-PHP中文网

scroll-timeline 是 css 滚动驱动动画的核心机制，将滚动进度映射为时间轴；chrome 115+/edge 115+ 原生支持，firefox 需启用 flag 且仅限基础属性，safari 完全不支持。

html怎么用css滚动驱动动画_html scroll-driven动画新特性【深度解析】

scroll-timeline 是什么，浏览器支持到哪一步了

scroll-timeline 是 CSS 新增的滚动驱动动画核心机制，它把滚动容器的滚动进度映射为一个时间轴，让 @keyframes 动画能随滚动自然播放。但它不是所有浏览器都可用：Chrome 115+、Edge 115+ 原生支持；Firefox 和 Safari 当前（2024 年中）仍需前缀或完全不支持。

Chrome/Edge 中可直接用 scroll-timeline: --my-timeline; + @scroll-timeline 规则
Firefox 需启用 layout.css.scroll-driven-animations.enabled 标志（about:config），且仅支持 scroll-timeline-name 等基础属性
Safari 完全未实现，@scroll-timeline 会被忽略，animation-timeline 也不识别

如果你在 Safari 里看到动画不动，不是代码写错，是它压根没解析这条规则。

怎么写一个最简可用的 scroll-driven 动画

关键不在“炫”，而在“能跑通”。最小闭环包含三部分：滚动容器（scroller）、时间轴定义（@scroll-timeline）、绑定动画（animation-timeline）。

<div class="scroller">
  <div class="target">向下滚动看我动</div>
</div>
<p><style>
.scroller {
overflow-y: scroll;
height: 300px;
}
.target {
animation: fade-in 1s;
animation-timeline: --vertical-timeline; /<em> 绑定时间轴 /
}</style></p><p>@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}</p><p>@scroll-timeline --vertical-timeline {
source: selector(.scroller);
orientation: vertical;
start: 0px;
end: 300px;
}
</p>

注意点：

.scroller 必须有明确的 overflow-y: scroll（或 auto）和固定高度，否则滚动无法触发 timeline
@scroll-timeline 的 source 必须指向实际可滚动的元素，不能是 body（多数浏览器不认 body 为有效 scroller）
start/end 推荐用像素值而非百分比，避免因容器尺寸动态变化导致 timeline 错位

animation-range 和 scroll-timeline-range 怎么配合用

这两个属性决定动画在滚动轴上的“生效区间”，但容易混淆：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

animation-range 写在动画元素上，表示该元素的动画占整个 timeline 的哪一段（比如 animation-range: entry 0% entry 100%;）
scroll-timeline-range 是 @scroll-timeline 里的属性，定义 timeline 自身的有效滚动范围（已废弃，Chrome 119+ 起只认 start/end）

真正该用的是：

animation-range: 0% 100%; —— 动画从 timeline 0% 播到 100%
animation-range: entry 0% entry 100%; —— 动画从元素进入视口开始播，到完全离开视口结束（依赖 IntersectionObserver 行为）
animation-range: cover 0% cover 100%; —— 元素始终在视口内时全程播放

常见翻车点：

把 animation-range 写成 0 100%（缺单位）→ 无效，必须是 0% 或 entry 0%
在未设置 scroll-timeline 的情况下单独写 animation-range → 浏览器忽略，无报错也无效果
用 cover 但元素本身高度 > 容器高度 → timeline 无法覆盖完整滚动过程，动画卡在中间

为什么加了 scroll-driven 动画却没反应

绝大多数问题出在「滚动源不可见」或「timeline 未激活」：

检查滚动容器是否真的在滚动：给 .scroller 加 border: 1px solid red; 和 height，确认它不是被内容撑开、而是主动设置了溢出
打开 DevTools → Elements → 选中目标元素 → 查看 Computed 面板里是否有 animation-timeline 计算值，若显示 none，说明 timeline 名字拼错或未定义
Chrome 中可在 Rendering 面板勾选 “Scroll timeline visualization”，能看到 timeline 进度条是否随滚动移动
若用 source: selector(body)，改用具体容器（如 main 或带 id="scroller" 的 div），body 不被多数引擎视为合法 scroller
动画本身被其他样式覆盖（比如 opacity: 0 写在后面），优先级高于 keyframes → 用 DevTools 检查最终 computed opacity/transform 是否真在变