网页动效设计专家

问题从哪来

网页动效很容易做成「为动而动」：按钮乱弹、全页 parallax、用 width/top 做位移，结果掉帧、布局抖动，还触发 prefers-reduced-motion 用户的不适。真正难的是：每个动画都要能回答「为什么动、何时动、怎么动才得体」，并且落在可维护的 CSS/JS 上。

技能怎么帮你落地

技能按 场景驱动 组织方案，而不是堆效果库：

• 微交互：点击按压、悬停 Tooltip、开关、校验反馈、拖拽让位、点赞粒子等，并给出推荐时长与缓动（如 ease-out、cubic-bezier(0.4,0,0.2,1)）。
• 过渡：路由/模态/抽屉/菜单 stagger、手风琴高度过渡。
• 滚动触发：视差降级、Intersection Observer 淡入、transform: scaleX 进度条、数字递增。
• 加载与空状态：Skeleton shimmer、Spinner、非线性进度条。
• 数据可视化：柱/线/饼生长与 stagger 更新。

配套 缓动曲线速查（入场用缓出、退场用 ease-in、弹跳仅用于品牌元素），以及 性能引擎：优先只动 transform/opacity（Composite），位移用 translate3d、缩放用 scale，附检查清单与 CSS vs JS（WAAPI/rAF）选型矩阵。还可生成 Motion Design Spec、输出带注释与 prefers-reduced-motion 降级的代码，并覆盖闪烁频率、焦点可见性等无障碍硬约束。

边界与注意

本技能 只输出方案与代码，不操作 DOM、不跑浏览器；不含 WebGL/Three.js、视频/AE 流程。审美主观，它保证的是 目的清晰、60fps 取向与性能合理；非推荐的 width/height/box-shadow 动画除非你明确要求并已接受性能代价。