点击按钮或滚动到指定位置后再播放动画，已进入独立的 css 规范讨论。w3c 于 2026 年 10 月 20 日公开 animation triggers 的首份工作草案，提出把用户交互产生的 dom 事件、时间轴区间与动画播放动作关联起来。这是标准化工作的公开起点，不是浏览器全面上线公告。
来源：W3C CSS 官方规范
草案延续现有动画体系，没有重新定义一套关键帧格式。它在 Web Animations 模型上扩展触发机制，同时提供面向脚本的接口和面向 CSS Animations 的声明式属性。两条路径围绕相同的触发概念组织，页面作者不必把“何时开始”与动画内容本身合并成同一项配置。
触发条件分为两类。时间轴触发器关注进入或离开指定进度区间，例如元素滚动到可见区域；事件触发器关注点击、按键等交互事件。一个元素上的交互可以关联自身或另一个元素的动作，但这种关联需要显式定义名称与对应规则，不是页面上的任意事件都会自动启动动画。
来源：W3C CSS 官方规范
播放控制也不限于一次启动。文档描述了触发进入和退出时分别执行动作的模型，并允许触发式动画在条件发生前等待，之后按关联动作暂停、重新开始或重置。进入动作与退出动作有明确区分，不能把离开某个区间直接理解成浏览器必然反向播放。
时间轴机制还区分激活范围和保持活动的范围。官方示例允许内容接近屏幕中央时启动，直到完全离开视口后才结束活动状态。较窄的启动条件与较宽的持续条件能够分开表达，但具体行为取决于所声明的区间和播放动作，不是统一的滚动特效模板。
事件触发器可以描述无状态交互，也可以分别配置进入、退出事件。触发名称另有作用域规则，用于确定哪些元素能够关联同一个触发实例。这些约束直接影响可复用组件：名称相同并不意味着跨越页面结构后仍必然指向同一组动画。
W3C 公告和首份草案确认设计进入公开讨论阶段。文档仍可能修改、替换或废弃，也没有以这次发布承诺统一浏览器支持。生产页面若依赖触发机制，仍须分别验证交互、键盘路径和不支持环境下的基本内容呈现。
截图版权：Copyright © 2026 World Wide Web Consortium。原规范状态：First Public Working Draft。依据W3C 文档许可使用；原文地址见上文来源链接，中文报道并非 W3C 官方译文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
