Back to Details

ui-animation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI Animation

UI 动画

Core rules

核心规则

Animate to clarify cause/effect or add deliberate delight.
Keep interactions fast (200-300ms; up to 1s only for illustrative motion).
Never animate keyboard interactions (arrow-key navigation, shortcut responses, tab/focus).
Prefer CSS; use WAAPI or JS only when needed.
Make animations interruptible and input-driven.
Honor
```
prefers-reduced-motion
```
(reduce or disable).

动画应用于明确因果关系，或增添恰到好处的愉悦感。
交互动响应要快（200-300毫秒；仅说明性动效可延长至1秒）。
切勿为键盘交互设置动画（如方向键导航、快捷键响应、Tab键切换/焦点移动）。
优先使用CSS；仅在必要时使用WAAPI或JS实现动画。
动画需支持中断，并由用户输入驱动。
遵循
```
prefers-reduced-motion
```
设置（简化或禁用动画）。

What to animate

可设置动画的属性

For movement and spatial change, animate only
```
transform
```
and
```
opacity
```
.
For simple state feedback,
```
color
```
,
```
background-color
```
, and
```
opacity
```
transitions are acceptable.
Never animate layout properties; never use
```
transition: all
```
.
Avoid
```
filter
```
animation for core interactions; if unavoidable, keep blur <= 20px.

SVG: apply transforms on a

<g>

wrapper with

transform-box: fill-box; transform-origin: center

.

Disable transitions during theme switches.

针对位移和空间变化，仅对
```
transform
```
和
```
opacity
```
属性设置动画。
对于简单的状态反馈，可对
```
color
```
、
```
background-color
```
和
```
opacity
```
设置过渡效果。
切勿为布局属性设置动画；禁止使用
```
transition: all
```
。
核心交互中避免为
```
filter
```
设置动画；若无法避免，模糊值需≤20px。

SVG：在

<g>

容器上应用变换，并设置

transform-box: fill-box; transform-origin: center

。

主题切换期间禁用过渡效果。

Spatial and sequencing

空间布局与序列

Set
```
transform-origin
```
at the trigger point.
For dialogs/menus, start around
```
scale(0.85-0.9)
```
; avoid
```
scale(0)
```
.
Stagger reveals <= 50ms.

将
```
transform-origin
```
设置为触发动画的位置。
对话框/菜单的初始缩放值建议为
```
scale(0.85-0.9)
```
；避免使用
```
scale(0)
```
。
序列显示的时间间隔≤50毫秒。

Easing defaults

默认缓动函数

Enter and transform-based hover:
```
cubic-bezier(0.22, 1, 0.36, 1)
```
.
Move:
```
cubic-bezier(0.25, 1, 0.5, 1)
```
.
Simple hover colour/background/opacity:
```
200ms ease
```
.
Avoid
```
ease-in
```
for UI (feels slow).

入场动效及基于变换的悬停效果：
```
cubic-bezier(0.22, 1, 0.36, 1)
```
。
位移动效：
```
cubic-bezier(0.25, 1, 0.5, 1)
```
。
简单的悬停颜色/背景/透明度变化：
```
200ms ease
```
。
UI动效中避免使用
```
ease-in
```
（会给人缓慢的感受）。

Accessibility

可访问性

If
```
transform
```
is used, disable it in
```
prefers-reduced-motion
```
.
Disable hover transitions on touch devices via
```
@media (hover: hover) and (pointer: fine)
```
.

若使用了
```
transform
```
属性，需在
```
prefers-reduced-motion
```
模式下禁用该变换动画。
通过
```
@media (hover: hover) and (pointer: fine)
```
媒体查询，在触控设备上禁用悬停过渡效果。

Performance

性能优化

Pause looping animations off-screen.
Toggle
```
will-change
```
only during heavy motion and only for
```
transform
```
/
```
opacity
```
.
Prefer
```
transform
```
over positional props in animation libraries.
Do not animate drag gestures using CSS variables.

循环动画在元素移出屏幕时暂停。
仅在执行复杂动效时，为
```
transform
```
/
```
opacity
```
属性临时启用
```
will-change
```
。
在动画库中优先使用
```
transform
```
而非位置属性。
不要使用CSS变量实现拖拽手势的动画。

Reference

参考资料

Snippets and practical tips: examples.md

代码片段与实用技巧：examples.md

Workflow

工作流程

Start with the core rules, then pick a reference snippet from examples.md.
Keep motion functional; honor
```
prefers-reduced-motion
```
.
When reviewing, cite file paths and line numbers and propose concrete fixes.

先遵循核心规则，再从examples.md中选取参考代码片段。
确保动效具备功能性，同时遵循
```
prefers-reduced-motion
```
设置。
评审时，需标注文件路径和行号，并提出具体的修复方案。