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

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

/* 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流畅运行：目标设备上无卡顿
感觉自然：缓动曲线有机自然，而非机械生硬
时长合适：不会太快（生硬）或太慢（延迟）
简化动效正常工作：动画已被禁用或适当简化
不阻碍交互：用户可在动画期间/之后进行交互
带来价值：让界面更清晰或更愉悦

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