css动画失效的首要原因是animation-name与@keyframes名称不完全匹配（大小写、连字符等差异均导致静默失效），其次需确保animation-duration等必要属性存在，且元素display不为none。
目前不存在“CSS4动画”这个标准概念——W3C没有发布过名为 CSS4 的规范，所有所谓“CSS4动画”实际指向的是仍在草案阶段的 scroll-driven-animations 模块（属于 CSS Animations Level 2 规范），它不是 CSS4 的子集，而是对现有 CSS 动画能力的扩展。
为什么搜不到正式的 CSS4 动画文档？
CSS 标准采用模块化演进，而非按“CSS1/2/3/4”版本号线性升级。当前主流浏览器支持的动画能力全部来自 CSS Animations Level 1（即常说的 CSS3 动画），而 scroll-driven-animations 属于 CSS Animations Level 2 草案，尚未进入 Recommendation 阶段。
- W3C 官方页面中查不到 “CSS4” 规范，只有
CSS Animations Level 2、Level 3等模块草案 - MDN 文档中所有“CSS4”相关条目均为用户误标或旧社区习惯用语，已逐步修正
- Chrome 115+、Edge 115+ 默认启用
scroll-timeline和view-timeline，但 Safari 和 Firefox 仍需手动开启实验性功能
scroll-driven-animations 的核心能力是什么？
它让动画的播放进度不再依赖时间轴（animation-duration），而是绑定滚动位置或视口可见性，实现真正意义上的“滚动驱动”。这和传统 @keyframes + animation 的组合有本质差异：
-
scroll-timeline：将元素在页面中的滚动偏移量映射为 0%–100% 的动画时间轴 -
view-timeline：以元素进入/离开视口的过程作为触发和进度依据（类似intersectionObserver，但声明式） - 必须配合
animation-timeline属性显式绑定，否则仍走默认时间轴 - 不兼容旧版
animation-play-state控制逻辑——暂停滚动即暂停动画，无法独立控制
实际使用时最容易漏掉的关键配置
即使浏览器支持，少了这几项配置，scroll-driven-animations 就不会动：
- 必须定义
scroll-timeline-name或view-timeline-name，且名称需与animation-timeline值严格一致 -
scroll-timeline-axis默认是y，横向滚动需显式设为x -
scroll-timeline-start/scroll-timeline-end决定触发范围，默认是0px和100vh，常被忽略导致动画不触发 - 不能直接在伪类（如
:hover）上使用animation-timeline，它只接受元素自身的 timeline 定义
真正需要滚动动画时，优先检查 timeline 是否正确定义并绑定；把 scroll-driven-animations 当成“CSS3 动画的增强模式”，而不是替代品——它依赖同一套 @keyframes，只是换了进度控制器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
