css-animation-patterns

CSS 动画模式

概述

CSS 动画和过渡通过关键帧、过渡、变换以及现代的滚动驱动和视图过渡 API，为 Web 界面提供硬件加速的动效。只对复合属性（transform、opacity、filter）进行动画处理，以确保流畅的 60fps 性能，并始终遵循 prefers-reduced-motion。

浏览器渲染流程分为四个阶段：样式、布局、绘制和合成。只对复合属性进行动画处理，可完全跳过布局和绘制，直接在 GPU 合成器线程上运行。这是 CSS 动画最重要的性能原则。

现代 CSS 新增了两个强大的 API：滚动驱动动画将关键帧进度关联到滚动位置或元素可见状态，而非时间；视图过渡 API则通过基于快照的动画，在 SPA 和 MPA 中实现 DOM 状态之间的过渡。

适用场景： 元素状态变化、页面过渡、与滚动关联的效果、加载指示器、微交互、路由变化动画、滚动时显示内容的模式、视差效果、与滚动关联的进度指示器。

不适用场景： 复杂的物理模拟（使用 JS 动画库）、Canvas/WebGL 渲染、需要逐帧脚本控制的动画（直接使用 Web Animations API）、高度交互的拖放操作（使用指针事件和 JS）。

浏览器支持概览

功能	Chrome	Firefox	Safari
过渡、关键帧、变换	完整	完整	完整
单独的变换属性	104+	72+	14.1+
@starting-style	117+	129+	17.5+
transition-behavior: allow-discrete	117+	129+	17.4+
滚动驱动动画	115+	尚未支持	26+
同一文档视图过渡	111+	144+	18+
跨文档视图过渡	126+	尚未支持	18+
view-transition-class	125+	144+	18+

对于较新的功能，请使用 @supports 进行渐进增强。始终提供可正常使用的非动画回退方案。

快速参考

模式	API	要点
状态转换	transition: property duration easing	属性改变时触发；为提升性能，仅合成属性可触发
离散转换	transition-behavior: allow-discrete	启用对 display、visibility 的转换
入场动画	@starting-style { ... }	为 DOM 中出现的元素设置初始状态
关键帧动画	@keyframes name + animation 简写	多步骤序列，支持 forwards 填充模式
变换	transform: translate() scale() rotate()	由 GPU 合成，不会重新计算布局
独立变换	translate、rotate、scale	可使用不同的时序分别进行动画
滚动进度	animation-timeline: scroll()	将动画关联到容器的滚动位置
视图进度	animation-timeline: view()	将动画关联到元素在滚动视口中的可见性
动画范围	animation-range: entry 0% entry 100%	控制由哪个时间线区段驱动动画
命名滚动时间线	scroll-timeline-name + scroll-timeline-axis	在多个元素间复用滚动时间线
命名视图时间线	view-timeline-name + view-timeline-axis	复用视图时间线以跟踪可见性
视图转换（SPA）	document.startViewTransition(callback)	基于快照为 DOM 更新添加动画
视图转换（MPA）	@view-transition { navigation: auto }	跨文档转换，仅限同源
转换命名	view-transition-name: hero	标识元素，以便创建独立的转换组
转换类	view-transition-class: card	将命名元素分组，以共用转换样式
转换类型	startViewTransition({ types: [...] })	根据导航方向设置条件样式
GPU 提示	will-change: transform	将元素提升到合成器图层；请谨慎使用
动效偏好	@media (prefers-reduced-motion: reduce)	为提升无障碍性而禁用或简化动画
自定义缓动	cubic-bezier() 或 linear()	精细调整时序曲线；linear() 可用于多点缓动
阶跃缓动	steps(n, jump-term)	逐帧离散动画
动画合成	animation-composition: accumulate	控制同一属性上的多个动画如何组合
错开延迟	animation-delay: calc(var(--i) * 60ms)	使用 CSS 自定义属性为每个元素设置延迟
渲染隔离	contain: layout style	隔离渲染范围以提升动画性能
内容可见性	content-visibility: auto	跳过屏幕外内容的渲染

常见错误

错误	正确做法
为 width、height、top、left 设置动画	使用 transform: translate() 和 scale()，实现不触发布局的动画
为每个元素都添加 will-change	仅应用于频繁进行动画的元素，并在动画结束后移除
未处理 prefers-reduced-motion	使用 @media (prefers-reduced-motion: no-preference) 包裹动画
到处使用 translateZ(0) 技巧	改用 will-change，且仅在需要时使用
在 animation 简写属性之前声明 animation-timeline	在 animation（简写属性会将其重置为 auto）之后声明 animation-timeline
为滚动驱动的动画设置 animation-duration	动画时长由滚动控制；使用 auto 或省略该属性，为兼容 Firefox 设置为 1ms
忘记 view-transition-name 必须唯一	每个参与的元素在每个页面快照中都需要一个独特的名称
未为滚动驱动的动画提供回退方案	使用 @supports (animation-timeline: scroll()) 实现渐进增强
为 background-color 设置动画并期望 GPU 合成	只有 transform、opacity 和 filter 能可靠地通过 GPU 合成
使用 transition: all	指定确切的属性，避免意外的过渡和性能损耗
在 JS 动画中交错读取和写入 DOM	先批量读取，再批量写入，或使用 requestAnimationFrame
在 React 视图过渡中未使用 flushSync	React 会批处理更新；在回调中使用 flushSync 包裹 navigate()
未进行功能检查就调用 startViewTransition	始终使用 if (!document.startViewTransition) 提供回退方案

委派

• 动画实现：使用 Explore Agent 在参考文件中查找模式
• 性能审计：使用 Task Agent 检查各组件的动画性能
• 无障碍审查：使用 Task Agent 确认 prefers-reduced-motion 的覆盖情况
• 代码审查：委派给 code-reviewer Agent，审查与动画相关的 PR

如果有 ux-designer 技能，请将视觉动效设计决策委派给它。 否则，建议运行：npx skills add oakoss/agent-skills --skill ux-designer

参考资料

• 过渡、关键帧和动画属性
• 变换和性能优化
• 滚动驱动的动画
• 视图过渡 API