用途:为 Web 界面添加 CSS 动画、过渡、滚动驱动效果与视图过渡,覆盖元素状态变化、页面切换、加载指示、微交互、滚动揭示与视差等场景。
主要能力:基于 keyframes、transition、transform 实现硬件加速动效;使用 animation-timeline: scroll()/view() 与 animation-range 将动画进度绑定滚动位置或元素可见性;使用 document.startViewTransition() 与 @view-transition 实现 SPA/MPA 视图过渡;支持 @starting-style、transition-behavior: allow-discrete、view-transition-name/class、animation-composition、cubic-bezier()/linear() 等现代特性。
性能要点:仅动画 transform、opacity、filter 等合成属性,跳过 Layout 与 Paint,在 GPU 合成线程运行;will-change 仅用于频繁动画元素;避免动画 width、height、top、left 及 transition: all。
无障碍:始终处理 prefers-reduced-motion,用 @media (prefers-reduced-motion: no-preference) 包裹动效并提供无动画回退。
兼容与限制:滚动驱动动画 Firefox 尚未支持,跨文档视图过渡仅 Chrome 126+ 与 Safari 18+,需用 @supports 渐进增强;不适合复杂物理模拟、canvas/WebGL、逐帧脚本控制或拖拽交互,这些应改用 JS 动画库、Web Animations API 或指针事件。
用法提示:animation-timeline 须在 animation 简写之后声明;滚动驱动动画不设 animation-duration;view-transition-name 每页快照须唯一;React 中需用 flushSync 包裹 navigate();调用 startViewTransition 前先做特性检测。
资料未提供具体安装命令与收费信息。