Animations动画制作

GPU-Accelerated Properties

Only these properties animate on the compositor thread (60fps):

Property	Use
INLINECODE0	Move, rotate, scale (translateX, rotate, scale)
INLINECODE1

Fade in/out |

Everything else triggers layout or paint. Avoid animating:

• - width, height, margin, padding (layout thrashing)
• INLINECODE6, left, right, bottom (use transform instead)
• INLINECODE10, font-size (expensive reflows)

CODEBLOCK0

Reduced Motion

~5% of users experience vestibular disorders (dizziness, nausea from motion).

CODEBLOCK1

Keep subtle fades and color changes even with reduced motion. Remove parallax, bouncing, infinite loops.

Timing Functions

Easing	Use case
INLINECODE12	Elements entering view (appears responsive)
INLINECODE13

Elements exiting view (accelerates away) | | ease-in-out | Elements moving within view | | linear | Only for spinners, progress bars, color cycling |

CODEBLOCK2

Duration Guidelines

Type	Duration
Micro-interactions (hover, focus)	100-200ms
Transitions (modals, dropdowns)

200-300ms | | Page transitions | 300-500ms | | Complex choreography | 500-1000ms max |

Anything over 500ms feels sluggish. Shorter is usually better.

CSS Transitions vs Animations

Transitions: A to B state changes
CODEBLOCK3

Animations: Multi-step, auto-play, looping
CODEBLOCK4

Use transitions for hover/focus states. Use animations for on-load effects and sequences.

will-change

Only use as optimization when you have specific performance problems:

CODEBLOCK5

Transition Property Specificity

CODEBLOCK6

INLINECODE16 can cause unexpected animations on color, background, border changes.

React/Framework Traps

Exit animations require AnimatePresence:
CODEBLOCK7

Stable keys for list animations:
CODEBLOCK8

AutoAnimate parent must be unconditional:
CODEBLOCK9

Library Selection

Library	Size	Best for
CSS only	0kb	Hover states, simple transitions
AutoAnimate

3kb | Lists, accordions, toasts (90% of UI animations) | | Motion | 22kb | Gestures, physics, scroll animations, complex choreography | | GSAP | 60kb | Timelines, creative animation, scroll-triggered sequences |

Start with CSS. Add AutoAnimate for list animations. Only add Motion/GSAP for complex needs.

Common Mistakes

• - Animating width/height instead of scale—causes layout thrashing
• Infinite animations without pause control—no way to stop
• Same easing for enter and exit—use ease-out for enter, ease-in for exit
• Ignoring prefers-reduced-motion—causes physical discomfort
• Duration over 500ms—feels sluggish
• INLINECODE20 catching unintended properties
• Missing AnimatePresence for exit animations in React