Back to Details

animate

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Analyze a feature and add motion that improves clarity, feedback, perceived performance, and polish without making the interface feel slow, noisy, or theatrical.
分析功能并添加动效，提升界面的清晰度、反馈性、感知性能和精致度，同时避免让界面显得迟缓、杂乱或夸张。

MANDATORY PREPARATION

必备准备工作

Users start this workflow with 
/animate
. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: performance constraints.
Consult the motion reference for timing, easing, choreography, and reduced-motion handling. Consult the animate reference index when you need to browse the deeper motion library by use case instead of guessing filenames. Consult the elevation system when motion should reinforce raised, pressed, inset, dragged, or layered depth. Consult the interaction reference when animation decisions overlap with focus, loading, transitions, or feedback states. Consult the component anatomy reference when motion affects custom primitives such as buttons, tabs, tooltips, toasts, toggles, drawers, or submit actions. Consult the responsive design reference when motion needs to adapt across small screens, touch contexts, or reduced viewport space. Consult the framework official docs reference before making framework-specific animation decisions. Consult the React shadcn accelerators reference when the request overlaps with React toasts, drawers, text motion, or other UI patterns that already have strong accelerators. Consult the CSS, Tailwind, and WAAPI motion reference to decide when modern CSS, Tailwind, or WAAPI can solve the motion cleanly without reaching for a framework animation library. Consult the scroll-driven animations reference when motion should progress with scroll position rather than time. Consult the view transitions reference when animating between page states or DOM changes with shared-element continuity. Consult attribution and sources for the source lineage behind this skill's Emil-inspired motion guidance. Consult entrance animations, exit animations, gesture interactions, and micro-interactions for consolidated thematic guidance by motion type. Consult ease-out defaults, easing by context, and custom easing curves when choosing motion curves. Consult UI under 300ms, asymmetric press and release timing, 500ms drawer timing, faster perceived performance, and tooltip timing escalation when the main question is duration rather than easing. Consult on-screen movement easing, sheet and drawer easing, and spring motion when the motion pattern needs more specific guidance. Consult damped drag boundaries, upward drag friction, interruptible animations, momentum dismissal, pointer capture, scroll and drag conflicts, and velocity-aware snap points when implementing gesture-heavy surfaces. Consult blur-bridged transitions, clip-path tabs, respect reduced motion, opacity fallback, reduced motion alternatives, Motion's 
useReducedMotion
, hover gap fill, scroll reveal thresholds, child orchestration, and toast stack depth for polish and accessibility refinement. Consult transform and opacity only, avoid CSS variables in drag loops, clip-path reveals, hardware-accelerated motion under load, and surgical 
will-change
 for performance-sensitive property choices. Consult immediate action feedback, interaction frequency, no keyboard animation, marketing exceptions, and animation purpose for strategy-heavy motion decisions. Consult preserve-3d effects, never scale from zero, origin-aware animations, and percentage translateY when the question is really about transform technique and spatial feel. Consult button press scale 0.97, scale affecting children, and SVG path morph disclosure icons for finer transform polish details.
If the interface already feels laggy under frequent use, also load 
optimize
. If the interface needs stronger resilience around reduced motion, errors, overflow, edge cases, or mixed input modes, also load 
harden
.
用户通过
/animate
启动此工作流。激活此技能后，加载$frontend-design — 其中包含设计原则、反模式以及上下文收集协议。在继续操作前请遵循该协议 — 如果尚无设计上下文，必须先加载$setup。此外还需收集：性能约束条件。
查阅动效参考文档获取时长、缓动、编排及简化动效处理的相关内容。 当需要按用例浏览深层动效库而非猜测文件名时，查阅动效参考索引。 当动效需要强化凸起、按压、嵌入、拖拽或分层深度时，查阅层级系统文档。 当动画决策涉及焦点、加载、过渡或反馈状态时，查阅交互参考文档。 当动效影响自定义基础组件（如按钮、标签页、工具提示、提示弹窗、开关、抽屉或提交动作）时，查阅组件结构参考文档。 当动效需要适配小屏幕、触摸场景或受限视口空间时，查阅响应式设计参考文档。 在做出框架特定的动画决策前，查阅框架官方文档参考。 当需求涉及React提示弹窗、抽屉、文本动效或其他已有成熟加速方案的UI模式时，查阅React shadcn加速方案参考。 查阅CSS、Tailwind与WAAPI动效参考文档，判断何时可通过现代CSS、Tailwind或WAAPI简洁地实现动效，无需使用框架动画库。 当动效应随滚动位置而非时间推进时，查阅滚动驱动动画参考文档。 当在页面状态或DOM变化间实现具有共享元素连续性的动画时，查阅视图过渡参考文档。 查阅归属与来源了解此技能中受Emil启发的动效指南的来源脉络。 查阅入场动画、退场动画、手势交互及微交互获取按动效类型分类的综合主题指南。 选择动效曲线时，查阅缓出默认值、按场景选择缓动及自定义缓动曲线。 当核心问题是时长而非缓动时，查阅300ms内完成的UI动效、按压与释放的非对称时长、抽屉500ms时长、提升感知性能及工具提示时长递进。 当动效模式需要更具体的指导时，查阅屏幕内移动缓动、面板与抽屉缓动及弹簧动效。 实现手势密集型界面时，查阅阻尼拖拽边界、向上拖拽摩擦力、可中断动画、动量关闭、指针捕获、滚动与拖拽冲突及速度感知吸附点。 查阅模糊过渡、裁剪路径标签页、尊重简化动效偏好、透明度降级方案、简化动效替代方案、Motion的
useReducedMotion
、悬停间隙填充、滚动显示阈值、子元素编排及提示弹窗堆叠深度以优化精致度与无障碍性。 选择性能敏感型属性时，查阅仅变换与透明度、拖拽循环中避免CSS变量、裁剪路径显示、高负载下的硬件加速动效及精准使用
will-change
。 做出策略性动效决策时，查阅即时动作反馈、交互频率、键盘操作无动画、营销场景例外及动画目的。 当问题涉及变换技术与空间感时，查阅preserve-3d效果、从不从缩放0开始、基于原点的动画及百分比 translateY。 查阅按钮按压缩放0.97、缩放影响子元素及SVG路径变形展开图标获取更精细的变换优化细节。
如果界面在频繁使用时已出现卡顿，还需加载
optimize
。 如果界面在简化动效、错误处理、溢出、边缘情况或混合输入模式方面需要更强的适应性，还需加载
harden
。

Attribution and Inspiration

归属与灵感来源

This skill's motion guidance is informed in part by Emil Kowalski's animations.dev course, especially the emphasis on easing choice, timing, tasteful restraint, springs, and motion that "feels right" in production UI.
It is also informed by Emil's animation-heavy open-source work on Sonner and Vaul, which are already relevant elsewhere in this library for React toast and drawer guidance.
This repository rewrites those lessons into original, repository-specific guidance rather than reproducing the course materials directly.
此技能的动效指南部分参考了Emil Kowalski的animations.dev课程，尤其是在缓动选择、时长控制、适度克制、弹簧动效以及让生产级UI动效“感觉自然”方面的强调。
同时也参考了Emil在动画密集型开源项目Sonner和Vaul中的工作，这些项目已在本库的React提示弹窗与抽屉指南中有所提及。
本仓库将这些经验重写为原创的、针对仓库的专属指南，而非直接复制课程内容。

Motion Operating Model

动效操作模型

Use this decision order before adding any animation:
  1. Fix structure first — motion should reinforce hierarchy and state, not rescue a confusing layout.
  2. Animate only with a job to do — every animation should improve feedback, orientation, relationship, or delight.
  3. Bias toward speed — product UI should feel responsive first and impressive second.
  4. Keep motion interruptible — new user intent beats finishing the old animation.
  5. Match the input method — mouse, touch, and keyboard interactions do not all deserve the same motion treatment.
  6. Plan reduced motion up front — accessibility is part of the system, not a cleanup pass.
  7. Prefer the lightest implementation that fits — modern CSS and Tailwind first, WAAPI when imperative timing matters, Motion when the interaction genuinely needs it.
Use motion for one or more of these jobs:
  • Feedback — acknowledge that an action happened
  • Orientation — help users understand where something came from or where it went
  • Relationship — show how surfaces, layers, and controls relate spatially
  • Delight — add warmth or personality after the fundamentals already work
If the animation cannot justify itself with one of those jobs, cut it.
添加任何动画前，请遵循以下决策顺序：
  1. 先修复结构 — 动效应强化层级与状态，而非拯救混乱的布局。
  2. 仅为明确目标添加动画 — 每个动画都应提升反馈性、导向性、关联性或愉悦感。
  3. 优先追求速度 — 产品UI应首先保证响应迅速，其次才是视觉惊艳。
  4. 保持动效可中断 — 用户的新操作优先级高于完成旧动画。
  5. 匹配输入方式 — 鼠标、触摸与键盘交互不应使用相同的动效处理方式。
  6. 提前规划简化动效方案 — 无障碍性是系统的一部分，而非后续补充。
  7. 优先选择最轻量的可行实现方式 — 优先使用现代CSS与Tailwind，当需要命令式时长控制时使用WAAPI，当交互确实需要时再使用Motion。
动效应服务于以下一个或多个目标：
  • 反馈 — 确认操作已执行
  • 导向 — 帮助用户理解元素的来源或去向
  • 关联 — 展示界面、层级与控件之间的空间关系
  • 愉悦 — 在基础功能正常的前提下增添温暖感或个性
如果动画无法满足上述任一目标，请移除它。

Assess Motion Opportunities

评估动效机会

Analyze where motion would improve the experience:
  1. Identify static areas:
    • Missing feedback: Actions without visual acknowledgment (button clicks, form submission, etc.)
    • Jarring transitions: Instant state changes that feel abrupt (show/hide, page loads, route changes)
    • Unclear relationships: Spatial or hierarchical relationships that aren't obvious
    • Lack of delight: Functional but joyless interactions
    • Missed guidance: Opportunities to direct attention or explain behavior
  2. Understand the context:
    • What's the personality? (Playful vs serious, energetic vs calm)
  • What's the performance budget? (Compact-layout-first? Complex page?)
  • Who's the audience? (Motion-sensitive users? Power users who want speed?)
  • What matters most? (One hero animation vs many micro-interactions?)
  • Which inputs matter? (mouse, touch, keyboard, stylus)
  • Which interactions are high-frequency and should stay especially snappy?
If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
CRITICAL: Respect 
prefers-reduced-motion
. Always provide non-animated alternatives for users who need them.
Motion should reinforce hierarchy, not compensate for weak hierarchy. If the layout only becomes understandable once it moves, fix the layout first.
分析动效可提升体验的场景：
  1. 识别静态区域：
    • 缺失反馈：无视觉确认的操作（按钮点击、表单提交等）
    • 生硬过渡：感觉突兀的即时状态变化（显示/隐藏、页面加载、路由切换）
    • 关系模糊：不明确的空间或层级关系
    • 缺乏愉悦感：功能正常但毫无趣味的交互
    • 错失引导机会：可引导注意力或解释行为的场景
  2. 理解上下文：
    • 产品个性如何？（活泼vs严肃，活力vs沉稳）
    • 性能预算是多少？（优先紧凑布局？还是复杂页面？）
    • 目标受众是谁？（对动敏感的用户？追求速度的高级用户？）
    • 最核心的需求是什么？（一个核心动画vs多个微交互？）
    • 主要使用哪些输入方式？（鼠标、触摸、键盘、手写笔）
    • 哪些是高频交互，需要保持特别流畅？
如果从代码库中无法明确上述任何信息，请直接询问用户以澄清。
关键要求：尊重
prefers-reduced-motion
设置。始终为有需求的用户提供无动画替代方案。
动效应强化层级，而非弥补薄弱的层级设计。如果布局只有在动起来时才能被理解，请先修复布局。

Plan Animation Strategy

规划动画策略

Create a purposeful animation plan:
  • Hero moment: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
  • Feedback layer: Which interactions need acknowledgment?
  • Transition layer: Which state changes need smoothing?
  • Gesture layer: Which drag, swipe, snap, or dismiss interactions need physical logic?
  • Delight layer: Where can we surprise and delight?
  • Depth logic: Which elements should feel raised, pressed, dragged, inset, or layered?
  • Reduced-motion plan: What simplifies to fade, blur, or instant state change?
  • Performance budget: Which motions must stay lightweight because they happen often?
IMPORTANT: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
制定有明确目标的动画方案：
  • 核心时刻：唯一的标志性动画是什么？（页面加载？核心区域？关键交互？）
  • 反馈层：哪些交互需要确认？
  • 过渡层：哪些状态变化需要平滑处理？
  • 手势层：哪些拖拽、滑动、吸附或关闭交互需要物理逻辑？
  • 愉悦层：哪些场景可以带来惊喜与愉悦？
  • 深度逻辑：哪些元素应呈现凸起、按压、拖拽、嵌入或分层的感觉？
  • 简化动效方案：哪些动效应简化为淡入淡出、模糊或即时状态变化？
  • 性能预算：哪些动效应保持轻量，因为它们会频繁触发？
重要提示：一个精心编排的体验胜过四处散落的动画。专注于高影响力的时刻。

Default Motion Rules

默认动效规则

Use these as the default guidelines for animation work unless the product context gives a strong reason to deviate.
除非产品上下文有充分理由偏离，否则请遵循以下默认动画指南。

1. Strategy and Purpose

1. 策略与目标

  • Every animation must earn its place through feedback, orientation, relationship, or delight.
  • Product interfaces should usually feel fast, calm, and precise. Save slower or more dramatic motion for onboarding, hero moments, storytelling, or marketing surfaces.
  • Favor one signature moment plus disciplined micro-interactions over adding motion everywhere.
  • Do not animate keyboard-initiated actions just because pointer interactions animate. Keyboard users usually want predictable state change with minimal delay.
  • The more often an interaction happens, the less motion it usually needs. High-frequency controls should feel nearly instant.
  • Acknowledge user input immediately. Aim for visible feedback within roughly 80ms for micro-interactions whenever possible.
  • If real work may exceed roughly 400ms, respond immediately with optimistic UI, skeletons, progress, or clear loading feedback instead of leaving a dead pause.
  • Never use motion to disguise slow loading, weak hierarchy, or missing state design.
  • 每个动画都必须通过反馈、导向、关联或愉悦证明其存在的价值。
  • 产品界面通常应给人快速、沉稳、精准的感觉。较慢或更具戏剧性的动效应保留给引导流程、核心时刻、叙事场景或营销界面。
  • 优先选择一个标志性时刻加严谨的微交互，而非到处添加动效。
  • 不要因为指针交互有动画就为键盘触发的操作添加动画。键盘用户通常希望状态变化可预测且延迟最小。
  • 交互越频繁，通常所需的动效越少。高频控件应几乎即时响应。
  • 立即响应用户输入。尽可能在约80ms内为微交互提供可见反馈。
  • 如果实际操作可能超过约400ms，应立即通过乐观UI、骨架屏、进度条或清晰的加载反馈做出响应，而非让界面陷入停滞。
  • 切勿使用动效掩盖加载缓慢、层级薄弱或缺失的状态设计。

2. Easing Defaults

2. 缓动默认值

  • Use ease-out as the default for entrances, reveals, and most feedback transitions.
  • Use custom cubic-bezier curves instead of the generic CSS 
    ease
    default.
  • Use ease-in-out for reversible, on-screen state changes that travel there and back.
  • Use spring motion when the movement should feel physically connected to gesture input or object behavior.
  • For drawers, sheets, and similar surfaces, a good starting point is the sheet-style curve 
    cubic-bezier(0.32, 0.72, 0, 1)
    .
  • Prefer exponential-style deceleration such as 
    ease-out-quart
    , 
    ease-out-quint
    , or 
    ease-out-expo
    for refined UI motion.
  • Avoid bounce and elastic curves unless the product intentionally embraces a toy-like or playful physical metaphor. They usually feel dated, noisy, or self-conscious.
  • Match easing to context:
    • entering surfaces → ease-out
    • exiting surfaces → shorter duration, often ease-in or a snappier exit curve
    • state toggles / reversible movement → ease-in-out
    • gesture-linked movement → spring or velocity-aware interpolation
  • 将ease-out作为入场、显示及大多数反馈过渡的默认缓动方式。
  • 使用自定义三次贝塞尔曲线而非通用的CSS 
    ease
    默认值。
  • 对于可逆的屏幕内状态变化，使用ease-in-out。
  • 当运动应与手势输入或对象行为产生物理关联时，使用弹簧动效。
  • 对于抽屉、面板等界面，推荐从面板风格曲线
    cubic-bezier(0.32, 0.72, 0, 1)
    开始尝试。
  • 优先使用指数式减速曲线，如
    ease-out-quart
    、
    ease-out-quint
    或
    ease-out-expo
    ，以实现精致的UI动效。
  • 除非产品有意采用玩具般或活泼的物理隐喻，否则避免使用弹跳和弹性曲线。这些曲线通常会显得过时、杂乱或刻意。
  • 根据场景匹配缓动方式：
    • 入场界面 → ease-out
    • 退场界面 → 更短时长，通常为ease-in或更干脆的退场曲线
    • 状态切换 / 可逆运动 → ease-in-out
    • 与手势关联的运动 → 弹簧动效或速度感知插值

3. Timing and Duration

3. 时长与计时

  • Keep most recurring UI motion under 300ms.
  • Use 100-150ms for press states, toggles, color changes, and immediate acknowledgment.
  • Use 200-300ms for standard UI state changes such as hover, menus, tooltips, and small reveals.
  • Use 300-500ms for larger layout transitions such as drawers, modals, accordions, and major surface changes.
  • Treat 500ms as a special-case upper bound for bigger surface motion like sheets or staged entrances, not as the default for ordinary controls.
  • Exit animations should be faster than entrances. A good default is roughly 75% of enter duration.
  • Press should be faster than release. Downward feedback should feel immediate; reset can be slightly softer.
  • Delay the first tooltip or hover-revealed helper when needed, but make subsequent related reveals much faster or instant so the interface does not feel sticky.
  • Long stagger chains are a smell. Cap total stagger time so the last item does not arrive embarrassingly late.
  • 大多数重复出现的UI动效应控制在300ms以内。
  • 使用100-150ms处理按压状态、开关、颜色变化及即时确认。
  • 使用200-300ms处理标准UI状态变化，如悬停、菜单、工具提示及小型显示效果。
  • 使用300-500ms处理较大的布局过渡，如抽屉、模态框、折叠面板及主要界面变化。
  • 将500ms作为大型界面动效（如面板或分阶段入场）的特殊上限，而非普通控件的默认值。
  • 退场动画应比入场动画更快。默认使用入场时长的约75%。
  • 按压动效应比释放动效更快。向下反馈应感觉即时；重置动效可稍柔和。
  • 必要时延迟第一个工具提示或悬停显示的辅助内容，但后续相关显示应快得多或即时显示，避免界面显得卡顿。
  • 过长的序列编排是不良信号。限制总编排时间，避免最后一个元素出现过晚。

4. Property Selection and Performance

4. 属性选择与性能

  • Prefer animating transform and opacity.
  • Avoid animating width, height, top, left, padding, margin, border-width, or other layout-heavy properties unless there is a strong reason and the surface is small.
  • For accordion-like height transitions, prefer grid-template-rows or equivalent layout-friendly patterns over raw 
    height
    animation when possible.
  • Use clip-path, masks, or composited reveals when you need a layout-free reveal effect.
  • Use hardware-friendly transforms when the main thread is busy or the component animates frequently.
  • Use 
    will-change
    sparingly and only when animation is imminent or proven to need it.
  • During drag loops, avoid animation setups that route every frame through expensive CSS-variable or layout recalculation paths if they introduce lag.
  • Prefer Intersection Observer for scroll-triggered motion and stop observing once the motion has completed if it only needs to happen once.
  • 优先为transform和opacity添加动画。
  • 避免为width、height、top、left、padding、margin、border-width或其他布局密集型属性添加动画，除非有充分理由且界面尺寸较小。
  • 对于类似折叠面板的高度过渡，尽可能优先使用grid-template-rows或等效的布局友好模式，而非直接动画化
    height
    。
  • 当需要无布局影响的显示效果时，使用clip-path、遮罩或合成显示方式。
  • 当主线程繁忙或组件频繁动画时，使用硬件友好的变换方式。
  • 谨慎使用
    will-change
    ，仅在动画即将触发或已证明需要时使用。
  • 在拖拽循环中，避免会导致每帧都经过昂贵的CSS变量或布局重计算路径的动画设置，以免产生卡顿。
  • 优先使用Intersection Observer处理滚动触发的动效，且如果动效只需触发一次，完成后停止观察。

5. Transform and Scale Techniques

5. 变换与缩放技巧

  • For button or chip press feedback, 
    scale(0.97)
    is a strong default starting point.
  • Never animate entry from 
    scale(0)
    . Start closer to 
    scale(0.95)
    or higher so the element keeps believable mass.
  • Use percentage-based translate values when movement should scale with the element or viewport size.
  • Make motion origin-aware:
    • menus and tooltips should emerge from the trigger edge
    • drawers and sheets should move from their anchored side
    • lifted cards should feel like they rise from their current plane
  • Remember that scaling affects children. Text and icons can feel blurry or distorted if the scale range is too aggressive.
  • Use 3D transforms only when they improve spatial understanding or delight meaningfully. Do not reach for 
    preserve-3d
    just because it looks flashy in isolation.
  • 对于按钮或芯片的按压反馈，
    scale(0.97)
    是一个优秀的默认起点。
  • 切勿从
    scale(0)
    开始入场动画。应从
    scale(0.95)
    或更高值开始，让元素保持可信的质感。
  • 当运动应随元素或视口尺寸缩放时，使用基于百分比的translate值。
  • 实现基于原点的动效：
    • 菜单和工具提示应从触发元素的边缘弹出
    • 抽屉和面板应从其锚定侧移动
    • 抬起的卡片应感觉像是从当前平面升起
  • 记住缩放会影响子元素。如果缩放范围过大，文本和图标可能会显得模糊或变形。
  • 仅当3D变换能切实提升空间理解或愉悦感时才使用。不要仅仅因为单独看起来炫酷就使用
    preserve-3d
    。

6. Gesture and Interaction Patterns

6. 手势与交互模式

  • Make interactive animations interruptible. Users should not have to wait for motion to finish before expressing new intent.
  • For swipe-to-dismiss, sheet snapping, and similar gestures, use distance plus velocity, not distance alone.
  • Add friction or damping near boundaries so drags resist instead of hard-stopping.
  • Handle scroll-vs-drag conflicts intentionally. Nested surfaces should not feel like they are fighting over input.
  • Use robust pointer handling such as pointer capture or equivalent gesture ownership when implementing drag interactions.
  • Visually lift dragged items with depth cues such as shadow, slight scale, or elevated layering.
  • When a surface can be dragged past its resting point, allow controlled resistance instead of making the gesture feel abruptly blocked.
  • Snap points should feel velocity-aware and purposefully chosen, not like arbitrary invisible walls.
  • 使交互式动画可中断。用户不应必须等待动画完成才能表达新的操作意图。
  • 对于滑动关闭、面板吸附等手势，使用距离加速度，而非仅依赖距离。
  • 在边界附近添加摩擦力或阻尼，使拖拽产生阻力而非生硬停止。
  • 有意处理滚动与拖拽冲突。嵌套界面不应出现输入抢占的情况。
  • 实现拖拽交互时，使用稳健的指针处理方式，如指针捕获或等效的手势所有权机制。
  • 通过阴影、轻微缩放或层级提升等深度提示，让拖拽的元素视觉上“浮起”。
  • 当界面可被拖拽超过其静止位置时，应允许受控的阻力，而非让手势感觉被突然阻挡。
  • 吸附点应具备速度感知能力且经过精心选择，而非像随意设置的隐形墙。

7. Accessibility and Polish

7. 无障碍性与精致度

  • Always respect 
    prefers-reduced-motion
    .
  • Reduced motion should usually mean simplified motion, not zero feedback. Replace large spatial movement with opacity, blur, highlight, or shorter transitions where possible.
  • Preserve functional cues such as focus states, progress, loading feedback, and success or error acknowledgment.
  • Use blur carefully to bridge between visual states when a straight cut feels harsh.
  • Use stagger intentionally for orchestration, not as decoration. Small lists can benefit; huge lists usually cannot.
  • Scroll reveals should trigger before the user has fully passed the element, but not so early that the effect feels detached from scroll context.
  • Fill hover gaps between triggers and floating surfaces so tooltips, menus, and popovers do not flicker closed during pointer travel.
  • Toast stacks can use offset, scale, and opacity to imply depth without becoming chaotic.
  • Respect motion sensitivity in compact and touch-capable contexts as much as in wide layouts. Gesture-led movement can be especially uncomfortable if overdone.
  • 始终尊重
    prefers-reduced-motion
    设置。
  • 简化动效应通常意味着简化的动效，而非完全取消反馈。尽可能用透明度、模糊、高亮或更短的过渡替代大幅空间移动。
  • 保留功能提示，如焦点状态、进度、加载反馈及成功/错误确认。
  • 谨慎使用模糊效果，在直接切换感觉生硬时用于衔接视觉状态。
  • 有意使用序列编排，而非仅作为装饰。小型列表可从中受益；大型列表通常无法受益。
  • 滚动显示应在用户完全滚动过元素前触发，但也不应过早触发，以免效果与滚动上下文脱节。
  • 填充触发元素与浮动界面之间的悬停间隙，避免工具提示、菜单和弹出框在指针移动过程中闪烁关闭。
  • 提示弹窗堆叠可使用偏移、缩放和透明度来暗示深度，同时避免混乱。
  • 在紧凑布局和触摸场景中，应像在宽布局中一样尊重动效敏感性。过度的手势驱动移动可能会让人特别不适。

Implement Animations

实现动画

Add motion systematically across these categories:
按以下类别系统地添加动效：

Entrance Animations

入场动画

  • Page load choreography: Stagger only where it improves comprehension; keep total orchestration tight
  • Hero section: Give the primary story moment a distinct entrance if the product tone supports it
  • Content reveals: Scroll-triggered animations using intersection observer
  • Modal/drawer entry: Smooth slide + fade, backdrop fade, focus management
  • 页面加载编排：仅在提升理解度的情况下使用序列编排；保持总编排紧凑
  • 核心区域：如果产品风格支持，为核心叙事时刻添加独特的入场动效
  • 内容显示：使用Intersection Observer实现滚动触发的动画
  • 模态框/抽屉入场：平滑滑动+淡入，背景淡入，焦点管理

Micro-interactions

微交互

  • Button feedback:
    • Hover: Subtle scale, color shift, or shadow change only if it improves affordance
    • Click / press: Quick scale down then up, pressed-in feel, or depth shift
    • Loading: Spinner or pulse state
  • Form interactions:
    • Input focus: Border, background, or elevation transition that clarifies focus without being distracting
    • Validation: Prefer clear color, icon, or text-state change before ornamental motion
  • Toggle switches: Smooth slide + color transition
  • Checkboxes/radio: Clear state change with tight timing
  • Like/favorite: Small scale or icon motion only if it fits the product tone
  • 按钮反馈：
    • 悬停：仅在提升可用性的情况下添加轻微缩放、颜色变化或阴影变化
    • 点击/按压：快速缩放后恢复，按压感或深度变化
    • 加载：加载 spinner 或脉冲状态
  • 表单交互：
    • 输入框焦点：清晰的边框、背景或层级过渡，不分散注意力
    • 验证：优先使用清晰的颜色、图标或文本状态变化，而非装饰性动效
  • 开关切换：平滑滑动+颜色过渡
  • 复选框/单选框：清晰的状态变化，时长紧凑
  • 点赞/收藏：仅在符合产品风格的情况下添加小型缩放或图标动效

State Transitions

状态过渡

  • Show/hide: Fade + slide (not instant), appropriate timing (200-300ms)
  • Expand/collapse: Layout-friendly open/close transitions with overflow handling, icon rotation if helpful
  • Loading states: Skeleton screen fades, spinner animations, progress bars
  • Success/error: Color transitions, icon animations, gentle scale pulse
  • Enable/disable: Opacity transitions, cursor changes
  • 显示/隐藏：淡入+滑动（而非即时切换），合适的时长（200-300ms）
  • 展开/折叠：布局友好的开合过渡，处理溢出情况，必要时添加图标旋转
  • 加载状态：骨架屏淡入，加载 spinner 动画，进度条
  • 成功/错误：颜色过渡，图标动画，轻微缩放脉冲
  • 启用/禁用：透明度过渡，光标变化

Navigation & Flow

导航与流程

  • Page transitions: Crossfade between routes, shared element transitions when they truly clarify continuity
  • Tab switching: Slide indicator, content fade, clip-path, or other fast directional cues
  • Carousel/slider: Smooth transforms, snap points, momentum, and interruptible input
  • Scroll effects: Parallax layers, sticky headers with state changes, scroll progress indicators
  • 页面过渡：路由间交叉淡入，当确实能提升连续性时使用共享元素过渡
  • 标签页切换：滑动指示器，内容淡入，裁剪路径或其他快速方向提示
  • 轮播/滑块：平滑变换，吸附点，动量效果，可中断输入
  • 滚动效果：视差图层，带状态变化的粘性头部，滚动进度指示器

Feedback & Guidance

反馈与引导

  • Hover hints: Tooltip fade-ins, cursor changes, element highlights
  • Drag & drop: Lift effect (shadow + scale), drop zone highlights, smooth repositioning — dragging should feel like the item pops forward on the z-axis
  • Copy/paste: Brief highlight flash on paste, "copied" confirmation
  • Focus flow: Highlight path through form or workflow
  • 悬停提示：工具提示淡入，光标变化，元素高亮
  • 拖拽与放置：抬起效果（阴影+缩放），放置区域高亮，平滑重定位 — 拖拽应感觉像是元素在Z轴上向前弹出
  • 复制/粘贴：粘贴时短暂高亮闪烁，“已复制”确认
  • 焦点流程：表单或工作流中的高亮路径

Depth & Elevation Motion

深度与层级动效

  • Raised elements should feel like they move toward the user
  • Pressed elements should feel like they move inward or downward
  • Use shadow and movement together to communicate state, not just style
  • Match motion emphasis to the same hierarchy logic used for color and typography
  • 凸起元素应感觉像是向用户移动
  • 按压元素应感觉像是向内或向下移动
  • 结合阴影与移动来传达状态，而非仅作为样式
  • 动效的重点应与颜色和排版使用的层级逻辑保持一致

Delight Moments

愉悦时刻

  • Empty states: Subtle floating animations on illustrations
  • Completed actions: Confetti, check mark flourish, success celebrations
  • Easter eggs: Hidden interactions for discovery
  • Contextual animation: Weather effects, time-of-day themes, seasonal touches
  • 空状态：插图上的轻微浮动动画
  • 完成操作：彩屑效果，对勾动画，成功庆祝
  • 彩蛋：供用户发现的隐藏交互
  • 上下文动画：天气效果，时段主题，季节性元素

Technical Implementation

技术实现

Use appropriate techniques for each animation:
为每个动画选择合适的技术：

Timing & Easing

时长与缓动

Durations by purpose:
  • 100-150ms: Instant feedback (button press, toggle)
  • 200-300ms: State changes (hover, menu open)
  • 300-500ms: Layout changes (accordion, modal, drawer)
  • 500ms max by default: Large surface transitions that truly need it
Easing curves (use these, not CSS defaults):
css
/* Recommended - natural deceleration */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* Smooth, refined */
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* Slightly snappier */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* Confident, decisive */
--ease-in-out-standard: cubic-bezier(0.65, 0, 0.35, 1); /* Reversible movement */
--ease-sheet-standard: cubic-bezier(0.32, 0.72, 0, 1);   /* Sheets / drawers */

/* AVOID - feel dated and tacky */
/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */
Exit animations are faster than entrances. Use ~75% of enter duration.
按用途划分的时长：
  • 100-150ms：即时反馈（按钮按压，开关）
  • 200-300ms：状态变化（悬停，菜单打开）
  • 300-500ms：布局变化（折叠面板，模态框，抽屉）
  • 默认最大500ms：确实需要的大型界面过渡
缓动曲线（使用这些，而非CSS默认值）：
css
/* 推荐 - 自然减速 */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* 平滑、精致 */
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* 稍显干脆 */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* 自信、果断 */
--ease-in-out-standard: cubic-bezier(0.65, 0, 0.35, 1); /* 可逆运动 */
--ease-sheet-standard: cubic-bezier(0.32, 0.72, 0, 1);   /* 面板 / 抽屉 */

/* 避免使用 - 显得过时且俗气 */
/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */
退场动画比入场动画更快。使用入场时长的约75%。

CSS Animations

CSS动画

css
/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity first (GPU-friendly)
- Tailwind utilities when the project already uses Tailwind
css
/* 优先用于简单的声明式动画 */
- 使用transitions处理状态变化
- 使用@keyframes处理复杂序列
- 优先使用transform + opacity（GPU友好）
- 如果项目已使用Tailwind，使用Tailwind工具类

JavaScript Animation

JavaScript动画

javascript
/* Use for complex, interactive animations */
- Web Animations API for programmatic control
- Framer Motion / Motion for React
- GSAP for complex sequences
Default rule: if a hover, press, reveal, or reduced-motion fallback can be expressed cleanly with modern CSS or Tailwind utilities, prefer that path before escalating to Motion.
javascript
/* 用于复杂的交互式动画 */
- 使用Web Animations API实现程序化控制
- 用于React的Framer Motion / Motion
- 使用GSAP处理复杂序列
默认规则：如果悬停、按压、显示或简化动效降级方案可通过现代CSS或Tailwind工具类简洁实现，优先选择此方式，再考虑使用Motion。

Performance

性能

  • GPU acceleration: Use 
    transform
    and 
    opacity
    , avoid layout properties
  • will-change: Add sparingly for known expensive animations
  • Reduce paint: Minimize repaints, use 
    contain
    where appropriate
  • Monitor FPS: Ensure 60fps on target devices
  • Interaction-first: Frequent product interactions should feel responsive even on weaker devices
  • GPU加速：使用
    transform
    和
    opacity
    ，避免布局属性
  • will-change：仅为已知的高开销动画谨慎添加
  • 减少重绘：最小化重绘，适当使用
    contain
  • 监控FPS：确保目标设备上达到60fps
  • 交互优先：频繁的产品交互在较弱设备上也应感觉响应迅速

Accessibility

无障碍性

css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
Prefer replacing large movement with short fades, highlights, blur transitions, or instant state changes instead of deleting every form of feedback.
css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
优先用短淡入、高亮、模糊过渡或即时状态变化替代大幅移动，而非删除所有反馈形式。

Useful Default Values

实用默认值

Use these as starting points, then tune for context:
ValueGood default use
scale(0.97)
Button and chip press feedback
scale(0.95)
Minimum believable enter scale
200ms
Standard UI transition
300ms
Soft cap for common UI motion
500ms
Large sheet / drawer transition upper bound
cubic-bezier(0.32, 0.72, 0, 1)
Drawer / bottom-sheet easing
10-16px
Toast-stack offset starting range
~100px
from viewport edge		Scroll-reveal trigger starting point
NEVER:
  • Use bounce or elastic easing curves by default—they draw attention to the animation itself
  • Animate layout properties such as width, height, top, or left when transform or opacity would do the job
  • Use long durations for routine feedback—it feels laggy fast
  • Animate without purpose—every animation needs a reason
  • Ignore 
    prefers-reduced-motion
    —this is an accessibility violation
  • Animate everything—animation fatigue makes interfaces feel exhausting
  • Force users to wait for motion to finish before they can continue
  • Use motion to paper over weak structure, unclear hierarchy, or slow data fetching
  • Ship gesture logic that ignores momentum, damping, or scroll conflicts
将这些作为起点，再根据上下文调整：
值适用场景
scale(0.97)
按钮和芯片的按压反馈
scale(0.95)
可信的最小入场缩放值
200ms
标准UI过渡
300ms
常见UI动效的软上限
500ms
大型面板/抽屉过渡的上限
cubic-bezier(0.32, 0.72, 0, 1)
抽屉/底部面板缓动曲线
10-16px
提示弹窗堆叠偏移的起始范围
距视口边缘
~100px
滚动显示触发的起始位置
绝对禁止：
  • 默认使用弹跳或弹性缓动曲线——它们会让动画本身成为焦点
  • 当transform或opacity可实现时，为width、height、top或left等布局属性添加动画
  • 为常规反馈使用长时长——会很快让人感觉卡顿
  • 无目标地添加动画——每个动画都需要理由
  • 忽略
    prefers-reduced-motion
    ——这违反无障碍规范
  • 为所有元素添加动画——动画疲劳会让界面显得令人疲惫
  • 强制用户等待动画完成才能继续操作
  • 使用动效掩盖薄弱的结构、模糊的层级或缓慢的数据获取
  • 发布忽略动量、阻尼或滚动冲突的手势逻辑

Verify Quality

验证质量

Test animations thoroughly:
  • Smooth at 60fps: No jank on target devices
  • Feels natural: Easing curves feel organic, not robotic
  • Appropriate timing: Not too fast (jarring) or too slow (laggy)
  • Immediate acknowledgment: Inputs get visible response quickly
  • Interruptible where needed: New intent can override old motion
  • Gesture quality: Drag, swipe, snap, and dismiss interactions feel physically coherent
  • Reduced motion works: Animations disabled or simplified appropriately
  • Doesn't block: Users can interact during/after animations
  • Adds value: Makes interface clearer or more delightful
Remember: the best UI animation usually feels inevitable, not attention-seeking. Animate with purpose, tune for responsiveness, respect accessibility, and let motion support the product instead of starring in it.
全面测试动画：
  • 60fps流畅运行：目标设备上无卡顿
  • 感觉自然：缓动曲线有机，而非机械
  • 时长合适：不会过快（生硬）或过慢（卡顿）
  • 即时确认：输入能快速得到可见响应
  • 必要时可中断：新操作意图可覆盖旧动效
  • 手势质感：拖拽、滑动、吸附和关闭交互感觉物理连贯
  • 简化动效正常工作：动画已禁用或适当简化
  • 不阻塞操作：用户可在动画期间/之后进行交互
  • 增加价值：让界面更清晰或更愉悦
记住：最佳的UI动画通常感觉是必然的，而非刻意吸引注意力。有目标地添加动画，优化响应速度，尊重无障碍规范，让动效为产品服务而非喧宾夺主。