animate

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.

分析功能并战略性地添加动画和微交互，增强用户理解、提供反馈并带来愉悦感。

MANDATORY PREPARATION

强制准备步骤

Context Gathering (Do This First)

背景信息收集（首先完成）

You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone (playful vs serious, energetic vs calm), and performance constraints.

Attempt to gather these from the current thread or codebase.

If you don't find exact information and have to infer from existing design and functionality, you MUST STOP and {{ask_instruction}} whether you got it right.
Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST {{ask_instruction}} clarifying questions first to complete your context.

Do NOT proceed until you have answers. Guessing leads to inappropriate or excessive animation.

如果没有必要的背景信息，你无法出色完成工作，比如目标受众（关键）、预期用例（关键）、品牌个性/风格（活泼vs严肃，活力vs沉稳）以及性能限制。

尝试从当前线程或代码库中收集这些信息。

如果你无法找到确切信息，必须从现有设计和功能中推断，那么你必须停止操作，并{{ask_instruction}}确认你的推断是否正确。
否则，如果你无法完全推断，或者你的置信度为中等或更低，你必须先{{ask_instruction}}提出澄清问题，以完善背景信息。

在得到答案前请勿继续。猜测会导致动画不合适或过度。

Use frontend-design skill

使用frontend-design技能

Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.

使用frontend-design技能了解设计原则和反模式。在该技能执行完毕并明确所有注意事项前，请勿继续。

Assess Animation Opportunities

评估动画实施机会

Analyze where motion would improve the experience:

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
Understand the context:
- What's the personality? (Playful vs serious, energetic vs calm)
- What's the performance budget? (Mobile-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?)

If any of these are unclear from the codebase, {{ask_instruction}}

CRITICAL: Respect

prefers-reduced-motion

. Always provide non-animated alternatives for users who need them.

分析动效可提升体验的场景：

识别静态区域：
- 缺少反馈：操作无视觉确认（按钮点击、表单提交等）
- 生硬过渡：状态瞬间变化显得突兀（显示/隐藏、页面加载、路由切换）
- 关系不清晰：空间或层级关系不明确
- 缺乏愉悦感：功能可用但交互无趣
- 缺少引导：可引导注意力或解释行为的机会
理解背景语境：
- 品牌个性是什么？（活泼vs严肃，活力vs沉稳）
- 性能预算是多少？（移动端优先？页面复杂？）
- 受众是谁？（对动敏感的用户？追求速度的高级用户？）
- 最核心的需求是什么？（一个核心动画vs多个微交互？）

如果代码库中这些信息有任何不明确之处，请{{ask_instruction}}

关键注意事项：尊重

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?
Delight layer: Where can we surprise and delight?

IMPORTANT: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.

制定有目的性的动画方案：

核心时刻：哪个是唯一的标志性动画？（页面加载？核心区域？关键交互？）
反馈层：哪些交互需要确认反馈？
过渡层：哪些状态变化需要平滑处理？
愉悦层：哪些场景可以带来惊喜和愉悦感？

重要提示：一次精心编排的体验胜过随处散落的动画。聚焦高影响力的时刻。

Implement Animations

实现动画

Add motion systematically across these categories:

按以下类别系统地添加动效：

Entrance Animations

入场动画

Page load choreography: Stagger element reveals (100-150ms delays), fade + slide combinations
Hero section: Dramatic entrance for primary content (scale, parallax, or creative effects)
Content reveals: Scroll-triggered animations using intersection observer
Modal/drawer entry: Smooth slide + fade, backdrop fade, focus management

页面加载编排：元素依次显示（100-150ms延迟），淡入+滑动组合效果
核心区域：主内容的醒目入场效果（缩放、视差或创意效果）
内容展示：使用Intersection Observer实现滚动触发动画
模态框/侧边栏入场：平滑滑动+淡入，背景淡入，焦点管理

Micro-interactions

微交互

Button feedback:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
- Click: Quick scale down then up (0.95 → 1), ripple effect
- Loading: Spinner or pulse state
Form interactions:
- Input focus: Border color transition, slight scale or glow
- Validation: Shake on error, check mark on success, smooth color transitions
Toggle switches: Smooth slide + color transition (200-300ms)
Checkboxes/radio: Check mark animation, ripple effect
Like/favorite: Scale + rotation, particle effects, color transition

按钮反馈：
- 悬停：轻微缩放（1.02-1.05）、颜色变化、阴影增强
- 点击：快速缩小再放大（0.95 → 1）、波纹效果
- 加载状态：加载 spinner 或脉冲效果
表单交互：
- 输入框聚焦：边框颜色过渡、轻微缩放或发光效果
- 验证：错误时震动、成功时显示对勾、平滑颜色过渡
切换开关：平滑滑动+颜色过渡（200-300ms）
复选框/单选框：对勾动画、波纹效果
点赞/收藏：缩放+旋转、粒子效果、颜色过渡

State Transitions

状态过渡

Show/hide: Fade + slide (not instant), appropriate timing (200-300ms)
Expand/collapse: Height transition with overflow handling, icon rotation
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
Tab switching: Slide indicator, content fade/slide
Carousel/slider: Smooth transforms, snap points, momentum
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
Copy/paste: Brief highlight flash on paste, "copied" confirmation
Focus flow: Highlight path through form or workflow

悬停提示：工具提示淡入、光标变化、元素高亮
拖拽：抬起效果（阴影+缩放）、放置区域高亮、平滑重定位
复制/粘贴：粘贴时短暂高亮闪烁，“已复制”确认提示
焦点流程：高亮表单或工作流中的操作路径

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)
500-800ms: Entrance animations (page load)

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 */

/* 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：布局变化（折叠面板、模态框）
500-800ms：入场动画（页面加载）

缓动曲线（使用以下曲线，而非CSS默认值）：

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 */

/* 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); */

退出动画比入场动画更快，使用入场时长的约75%。

CSS Animations

CSS动画

css

/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity only (GPU-accelerated)

css

/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity only (GPU-accelerated)

JavaScript Animation

JavaScript动画

javascript

/* Use for complex, interactive animations */
- Web Animations API for programmatic control
- Framer Motion for React
- GSAP for complex sequences

javascript

/* Use for complex, interactive animations */
- Web Animations API for programmatic control
- Framer Motion for React
- GSAP for complex sequences

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

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;
  }
}

NEVER:

Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself
Animate layout properties (width, height, top, left)—use transform instead
Use durations over 500ms for feedback—it feels laggy
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
Block interaction during animations unless intentional

css

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

绝对禁止：

使用弹跳或弹性缓动曲线——这类曲线显得过时且俗气
对布局属性（width、height、top、left）进行动画——改用transform
反馈动画时长超过500ms——会显得卡顿
无目的添加动画——每个动画都要有理由
忽略
```
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)
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: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right.

全面测试动画：

60fps流畅运行：目标设备上无卡顿
感觉自然：缓动曲线符合直觉，而非机械感
时长合适：不会太快（生硬）或太慢（卡顿）
精简动效生效：动画已适当禁用或简化
不阻塞交互：用户可在动画期间/之后进行交互
带来价值：让界面更清晰或更愉悦

记住：动效应增强理解并提供反馈，而不仅仅是装饰。有目的地添加动画，尊重性能限制，并始终考虑无障碍访问。优秀的动画是无形的——它只是让一切感觉恰到好处。