用途：该技能聚焦“何时无需 JavaScript 即可实现动画”，系统整理现代 CSS 动画能力，供前端实现滚动、过渡与微交互效果时查阅。
主要能力：包含 Scroll-Driven Animations API、View Transitions、@property 规则、视觉效果（clip-path、backdrop-filter、mix-blend-mode）及常见微交互模式（悬停过渡、错峰入场、加载动画）。每一主题对应独立参考文件：scroll-driven-api.md、view-transitions.md、property-rule.md、visual-effects.md。
选用方式：资料给出 CSS 与 GSAP 决策指南——简单揭示/淡入、与滚动绑定的进度指示、悬停/焦点状态过渡、追求主线程外性能、Safari 支持非关键、希望减少 JavaScript 时用 CSS；复杂多元素序列、pin/sticky、横向滚动区块、跨浏览器一致性、精细控制与时间线编排时用 GSAP，也可混合使用。
用法示例：滚动进度条使用 animation-timeline: scroll()；元素进入视口使用 animation-timeline: view() 与 animation-range: entry 0% cover 30%；视图过渡用 document.startViewTransition(() => { updateContent(); })；@property 定义可动画自定义属性后配合 transition: --progress 1s。Safari 滚动驱动动画需引入 polyfill：https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js。
限制与注意：应始终用 @media (prefers-reduced-motion) 包裹动效；只动画 transform/opacity 等合成属性，避免触发布局与重绘；谨慎使用 will-change，必要时用 contain 隔离。浏览器支持随版本变化，资料给出版本号但不保证长期有效；Safari 对滚动驱动动画需 polyfill，View Transitions 在 Firefox 支持情况资料标为不支持。具体项目适配与完整模式需查阅对应参考文件。