i-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

强制准备工作

Invoke /impeccable — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints.

调用 /impeccable —— 它包含设计原则、反模式以及上下文收集协议。在继续操作前请遵循该协议：如果目前还没有设计上下文，你必须先运行 /impeccable teach。此外还要收集：性能约束条件。

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 the user directly to clarify what you cannot infer.

CRITICAL: Respect

prefers-reduced-motion

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

分析哪些地方加入动效可以提升体验：

识别静态区域：
- 反馈缺失：没有视觉确认的操作（按钮点击、表单提交等）
- 过渡生硬：让人感觉突兀的即时状态切换（显示/隐藏、页面加载、路由跳转）
- 关系不清晰：不直观的空间或层级关系
- 缺乏愉悦感：功能完备但毫无乐趣的交互
- 引导缺失：可以引导用户注意力或解释操作逻辑的机会
理解上下文：
- 产品的风格定位是什么？（活泼还是严肃，有活力还是沉稳）
- 性能预算是多少？（是否优先适配移动端？页面复杂度如何？）
- 目标受众是谁？（对动效敏感的用户？追求速度的重度用户？）
- 核心优先级是什么？（一个核心英雄动画还是多个微交互？）

如果这些信息在代码库中不明确，直接询问用户你无法推断的内容。

重要提示：尊重

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或脉冲状态
表单交互：
- 输入框聚焦：边框颜色过渡、轻微缩放或发光效果
- 校验：错误时抖动、成功时显示对勾、平滑颜色过渡
Toggle开关：平滑滑动+颜色过渡（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

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

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流畅运行：目标设备上无卡顿
观感自然：缓动曲线符合直觉，不生硬
时长合理：不会太快（突兀）也不会太慢（卡顿感）
减少动效模式正常运行：动画按规则禁用或简化
不阻塞交互：用户可以在动画播放期间/播放后正常操作
有实际价值：让界面更清晰或更有愉悦感

记住：动效的作用是提升用户理解、提供反馈，而不仅仅是装饰。做有目的的动画，遵守性能约束，始终考虑无障碍体验。好的动画是隐形的——它只会让一切都用起来刚刚好。