css-native

用途：提供纯 CSS 的动画与视觉方案，尽量不引入 JS 动画库。核心是判断标准：页面动效少于 3 个、滚动揭示/视差、从 display:none 进入退出、提示框定位、页面转场等用原生 CSS；复杂多步时间线、动态列表错峰、可打断的物理弹簧、SVG 形状变形则改用 GSAP 或 Framer Motion。主要能力包括：滚动驱动动画，用 animation-timeline: scroll() 与 view() 配合 animation-range 控制播放区间；View Transitions API，同文档用 document.startViewTransition()，跨文档用 @view-transition { navigation: auto }，可用 view-transition-name 与 view-transition-class 命名分组；@starting-style 实现从 display:none 进入的入场动画，需搭配 transition-behavior: allow-discrete；锚点定位用 anchor-name、position-anchor、position-area 与 position-try-fallbacks 放置提示框；容器查询按组件宽度切换动画；以及 clip-path 过渡、backdrop-filter、mix-blend-mode、多重 radial-gradient 网格渐变、conic-gradient 加载动画等技巧。使用方式以 CSS 声明与少量 JS 调用为主，代码需按原文示例书写，例如 animation-timeline: scroll(root block)、animation-range: entry 0% entry 100%、transition: opacity 300ms, transform 300ms。限制与注意：避免 transition: all，避免动画 width、height、top、left，优先 transform、opacity、clip-path、filter；滚动驱动动画应放在 @supports 中做回退，@starting-style 必须搭配 allow-discrete，锚点定位需定义回退位置，滚动驱动动画用 both 而非 forwards。浏览器兼容性与无障碍、性能细节见 references/modern-css.md。