animation-motion-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Animation & Motion Design

动画与动效设计

Patterns for building performant, accessible animations using Motion (formerly Framer Motion, 18M+ weekly npm downloads) and the View Transitions API (cross-browser support in 2026). Covers layout animations, gesture interactions, exit transitions, micro-interactions, and motion accessibility.

本指南介绍如何使用Motion（原Framer Motion，每周npm下载量超1800万次）和View Transitions API（2026年将实现跨浏览器支持）构建高性能、无障碍的动画。内容涵盖布局动画、手势交互、退出过渡、微交互以及动效无障碍性相关内容。

Quick Reference

速查参考

Rule	File	Impact	When to Use
Layout Animations	`rules/motion-layout.md`	HIGH	Shared layout transitions, FLIP animations, layoutId
Gesture Interactions	`rules/motion-gestures.md`	HIGH	Drag, hover, tap with spring physics
Exit Animations	`rules/motion-exit.md`	HIGH	AnimatePresence, unmount transitions
View Transitions API	`rules/view-transitions-api.md`	HIGH	Page navigation, cross-document transitions
Motion Accessibility	`rules/motion-accessibility.md`	CRITICAL	prefers-reduced-motion, cognitive load
Motion Performance	`rules/motion-performance.md`	HIGH	60fps, GPU compositing, layout thrash

Total: 6 rules across 3 categories

规则	文件	影响等级	适用场景
布局动画	`rules/motion-layout.md`	高	共享布局过渡、FLIP动画、layoutId
手势交互	`rules/motion-gestures.md`	高	拖拽、悬停、点击（带弹簧物理效果）
退出动画	`rules/motion-exit.md`	高	AnimatePresence、卸载过渡
View Transitions API	`rules/view-transitions-api.md`	高	页面导航、跨文档过渡
动效无障碍性	`rules/motion-accessibility.md`	关键	prefers-reduced-motion、认知负荷
动效性能	`rules/motion-performance.md`	高	60fps、GPU合成、布局抖动

总计：3大分类下的6条规则

Decision Table — Motion vs View Transitions API

决策表 — Motion vs View Transitions API

Scenario	Recommendation	Why
Component mount/unmount	Motion	AnimatePresence handles lifecycle
Page navigation transitions	View Transitions API	Built-in browser support, works with any router
Complex interruptible animations	Motion	Spring physics, gesture interruption
Simple crossfade between pages	View Transitions API	Zero JS bundle cost
Drag/reorder interactions	Motion	drag prop with layout animations
Shared element across routes	View Transitions API	viewTransitionName CSS property
Scroll-triggered animations	Motion	useInView, useScroll hooks
Multi-step orchestrated sequences	Motion	staggerChildren, variants

场景	推荐方案	原因
组件挂载/卸载	Motion	AnimatePresence可处理生命周期
页面导航过渡	View Transitions API	浏览器原生支持，兼容任意路由
复杂可中断动画	Motion	弹簧物理效果、手势中断
页面间简单淡入淡出	View Transitions API	零JS包体积成本
拖拽/重排交互	Motion	带布局动画的drag属性
跨路由共享元素	View Transitions API	viewTransitionName CSS属性
滚动触发动画	Motion	useInView、useScroll钩子
多步骤编排序列	Motion	staggerChildren、variants

Quick Start

快速开始

Motion — Component Animation

Motion — 组件动画

tsx

import { motion, AnimatePresence } from "motion/react"

const fadeInUp = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: -10 },
  transition: { type: "spring", stiffness: 300, damping: 24 },
}

function Card({ item }: { item: Item }) {
  return (
    <motion.div {...fadeInUp} layout layoutId={item.id}>
      {item.content}
    </motion.div>
  )
}

function CardList({ items }: { items: Item[] }) {
  return (
    <AnimatePresence mode="wait">
      {items.map((item) => (
        <Card key={item.id} item={item} />
      ))}
    </AnimatePresence>
  )
}

tsx

import { motion, AnimatePresence } from "motion/react"

const fadeInUp = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: -10 },
  transition: { type: "spring", stiffness: 300, damping: 24 },
}

function Card({ item }: { item: Item }) {
  return (
    <motion.div {...fadeInUp} layout layoutId={item.id}>
      {item.content}
    </motion.div>
  )
}

function CardList({ items }: { items: Item[] }) {
  return (
    <AnimatePresence mode="wait">
      {items.map((item) => (
        <Card key={item.id} item={item} />
      ))}
    </AnimatePresence>
  )
}

View Transitions API — Page Navigation

View Transitions API — 页面导航

tsx

// React Router v7+ with View Transitions
import { Link, useNavigate } from "react-router"

function NavLink({ to, children }: { to: string; children: React.ReactNode }) {
  return <Link to={to} viewTransition>{children}</Link>
}

// CSS for the transition
// ::view-transition-old(root) { animation: fade-out 200ms ease; }
// ::view-transition-new(root) { animation: fade-in 200ms ease; }

tsx

// React Router v7+ 结合View Transitions
import { Link, useNavigate } from "react-router"

function NavLink({ to, children }: { to: string; children: React.ReactNode }) {
  return <Link to={to} viewTransition>{children}</Link>
}

// 过渡效果对应的CSS
// ::view-transition-old(root) { animation: fade-out 200ms ease; }
// ::view-transition-new(root) { animation: fade-in 200ms ease; }

Motion — Accessible by Default

Motion — 默认支持无障碍

tsx

import { useReducedMotion } from "motion/react"

function AnimatedComponent() {
  const shouldReduceMotion = useReducedMotion()

  return (
    <motion.div
      animate={{ x: 100 }}
      transition={shouldReduceMotion
        ? { duration: 0 }
        : { type: "spring", stiffness: 300, damping: 24 }
      }
    />
  )
}

tsx

import { useReducedMotion } from "motion/react"

function AnimatedComponent() {
  const shouldReduceMotion = useReducedMotion()

  return (
    <motion.div
      animate={{ x: 100 }}
      transition={shouldReduceMotion
        ? { duration: 0 }
        : { type: "spring", stiffness: 300, damping: 24 }
      }
    />
  )
}

Rule Details

规则详情

Layout Animations (Motion)

布局动画（Motion）

FLIP-based layout animations with the

layout

prop and shared layout transitions via

layoutId

Load:

rules/motion-layout.md

基于FLIP的布局动画，使用

layout

属性，通过

layoutId

实现共享布局过渡。

查看详情:
rules/motion-layout.md

Gesture Interactions (Motion)

手势交互（Motion）

Drag, hover, and tap interactions with spring physics and gesture composition.

Load:

rules/motion-gestures.md

带弹簧物理效果和手势组合的拖拽、悬停、点击交互。

查看详情:
rules/motion-gestures.md

Exit Animations (Motion)

退出动画（Motion）

AnimatePresence for animating components as they unmount from the React tree.

Load:

rules/motion-exit.md

使用AnimatePresence为React树中卸载的组件添加动画效果。

查看详情:
rules/motion-exit.md

View Transitions API

Browser-native page transitions using

document.startViewTransition()

and framework integrations.

Load:

rules/view-transitions-api.md

基于浏览器原生的页面过渡，使用

document.startViewTransition()

及框架集成方案。

查看详情:
rules/view-transitions-api.md

Motion Accessibility

动效无障碍性

Respecting user motion preferences and reducing cognitive load with motion sensitivity patterns.

Load:

rules/motion-accessibility.md

遵循用户动效偏好，通过动效敏感度模式降低认知负荷。

查看详情:
rules/motion-accessibility.md

Motion Performance

动效性能

GPU compositing, avoiding layout thrash, and keeping animations at 60fps.

Load:

rules/motion-performance.md

GPU合成、避免布局抖动、保持动画60fps。

查看详情:
rules/motion-performance.md

Key Principles

核心原则

60fps or nothing — Only animate
```
transform
```
and
```
opacity
```
(composite properties). Never animate
```
width
```
,
```
height
```
,
```
top
```
, or
```
left
```
.
Centralized presets — Define animation variants in a shared file, not inline on every component.
AnimatePresence for exits — React unmounts instantly; wrap with AnimatePresence to animate out.
Spring over duration — Springs feel natural and are interruptible. Use
```
stiffness
```
/
```
damping
```
, not
```
duration
```
.
Respect user preferences — Always check
```
prefers-reduced-motion
```
and provide instant alternatives.

要么60fps，要么不做 — 仅对
```
transform
```
和
```
opacity
```
（复合属性）做动画。绝不要对
```
width
```
、
```
height
```
、
```
top
```
或
```
left
```
做动画。
集中式预设 — 在共享文件中定义动画变体，不要在每个组件中内联定义。
退出动画用AnimatePresence — React会立即卸载组件；需用AnimatePresence包裹以实现退出动画。
优先使用弹簧而非时长 — 弹簧效果更自然且可中断。使用
```
stiffness
```
/
```
damping
```
，而非
```
duration
```
。
尊重用户偏好 — 始终检查
```
prefers-reduced-motion
```
，并提供即时替代方案。

Performance Budget

性能预算

Metric	Target	Measurement
Transition duration	< 400ms	User perception threshold
Animation properties	transform, opacity only	DevTools > Rendering > Paint flashing
JS bundle (Motion)	~16KB gzipped	Import only what you use
First paint delay	0ms	Animations must not block render
Frame drops	< 5% of frames	Performance API: `PerformanceObserver`

指标	目标值	测量方式
过渡时长	< 400ms	用户感知阈值
动画属性	仅transform、opacity	开发者工具 > 渲染 > 绘制闪烁
JS包体积（Motion）	~16KB gzip后	仅导入所需内容
首次绘制延迟	0ms	动画不得阻塞渲染
丢帧率	< 5%	Performance API: `PerformanceObserver`

Anti-Patterns (FORBIDDEN)

反模式（禁止使用）

Animating layout properties — Never animate
```
width
```
,
```
height
```
,
```
margin
```
,
```
padding
```
directly. Use
```
transform: scale()
```
instead.
Missing AnimatePresence — Components unmount instantly without it; exit animations are silently lost.
Ignoring prefers-reduced-motion — Causes vestibular disorders for ~35% of users with motion sensitivity.
Inline transition objects — Creates new objects every render, breaking React memoization.
duration-based springs — Motion springs use
```
stiffness
```
/
```
damping
```
, not
```
duration
```
. Mixing causes unexpected behavior.
Synchronous startViewTransition — Always await or handle the promise from
```
document.startViewTransition()
```
.

对布局属性做动画 — 绝不要直接对
```
width
```
、
```
height
```
、
```
margin
```
、
```
padding
```
做动画。改用
```
transform: scale()
```
。
缺少AnimatePresence — 没有它的话组件会立即卸载，退出动画会失效。
忽略prefers-reduced-motion — 会导致约35%的动效敏感用户出现前庭障碍。
内联过渡对象 — 每次渲染都会创建新对象，破坏React memoization。
基于时长的弹簧 — Motion弹簧使用
```
stiffness
```
/
```
damping
```
，而非
```
duration
```
。混用会导致意外行为。
同步调用startViewTransition — 始终要await或处理
```
document.startViewTransition()
```
返回的Promise。

Detailed Documentation

详细文档

Resource	Description
references/motion-vs-view-transitions.md	Comparison table, browser support, limitations
references/animation-presets-library.md	Copy-paste preset variants for common patterns
references/micro-interactions-catalog.md	Button press, toggle, checkbox, loading, success/error

资源	描述
references/motion-vs-view-transitions.md	对比表、浏览器支持情况、限制
references/animation-presets-library.md	可直接复制使用的通用模式预设变体
references/micro-interactions-catalog.md	按钮点击、切换、复选框、加载、成功/错误状态等微交互

animation-motion-design

Original

Translation

Animation & Motion Design

动画与动效设计

Quick Reference

速查参考

Decision Table — Motion vs View Transitions API

决策表 — Motion vs View Transitions API

Quick Start

快速开始

Motion — Component Animation

Motion — 组件动画

View Transitions API — Page Navigation

View Transitions API — 页面导航

Motion — Accessible by Default

Motion — 默认支持无障碍

Rule Details

规则详情

Layout Animations (Motion)

布局动画（Motion）

Gesture Interactions (Motion)

手势交互（Motion）

Exit Animations (Motion)

退出动画（Motion）

View Transitions API

View Transitions API

Motion Accessibility

动效无障碍性

Motion Performance

动效性能

Key Principles

核心原则

Performance Budget

性能预算

Anti-Patterns (FORBIDDEN)

反模式（禁止使用）

Detailed Documentation

详细文档

Related Skills

相关技能