---
id: sm-animate
name: "animate"
url: https://skills.yangsir.net/skill/sm-animate
author: pbakaus
domain: design
tags: ["animation", "motion-graphics", "after-effects", "lottie", "web-animation"]
install_count: 82100
rating: 4.70 (1720 reviews)
github: https://github.com/pbakaus/impeccable
---

# animate

> 此技能专注于运用设计语言，使AI工具的用户界面更生动、更具表现力，从而提升用户体验和交互的吸引力。

**Stats**: 82,100 installs · 4.7/5 (1720 reviews)

## Before / After 对比

### 动画效果智能生成与优化

## Readme

# animate

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

## MANDATORY PREPARATION

Use the frontend-design skill — 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 teach-impeccable first. Additionally gather: performance constraints.

## 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, STOP and call the AskUserQuestion tool to clarify.

**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them.

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

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

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

### 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):**

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

### CSS Animations

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

```

### JavaScript Animation

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

### Accessibility

```
@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

## 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.
Weekly Installs18.1KRepository[pbakaus/impeccable](https://github.com/pbakaus/impeccable)GitHub Stars10.2KFirst Seen14 days agoSecurity Audits[Gen Agent Trust HubPass](/pbakaus/impeccable/animate/security/agent-trust-hub)[SocketPass](/pbakaus/impeccable/animate/security/socket)[SnykPass](/pbakaus/impeccable/animate/security/snyk)Installed oncodex17.9Kopencode17.8Kgithub-copilot17.7Kgemini-cli17.7Kcursor17.7Kamp17.7K

---
*Source: https://skills.yangsir.net/skill/sm-animate*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-animate/markdown*