s3://rustfs-brand/motion/Guidelines · Motion

动效Motion

按顺序、可预期、在确定时间内完成；动效只说明状态变化。

缓动 standard · emphasized · exit时长 80–720 ms品牌动作 写入 · 修复

Principles动效原则

写入，而非漂浮

逐块出现，不漂浮、不视差。

修复，而非隐藏

缺失、校验、重建清楚可辨。

精确，不回弹

只用标准缓动，不回弹。

可以关闭

减弱动效时直接显示最终状态。

Easing缓动曲线

standard 用于多数变化，emphasized 用于进入，exit 用于离开。

720ms 对比

--ease-standardcubic-bezier(0.2, 0, 0, 1)

--ease-emphasizedcubic-bezier(0.16, 1, 0.3, 1)

--ease-exitcubic-bezier(0.4, 0, 1, 1)

linearlinear

Duration时长

界面交互 ≤ 420ms；720ms 只用于品牌动作。

--duration-instant80ms

按下反馈、切换勾选

--duration-fast150ms

悬停、颜色变化

--duration-base240ms

展开、标签页、提示

--duration-slow420ms

面板、抽屉、页面区块

--duration-scene720ms

品牌动作、片头场景

--duration-stagger40ms

分片之间的间隔

Brand moves品牌动作

写入与修复，来自 RustFS 的实际行为。

写入 Write

逐块出现，每块 60ms。

steps(2) · 60 ms / shard · 3 stripes

修复 Heal

缺块被校验块重建。

0 → 700 ms missing · 1000 ms rebuild · ease-emphasized

video/

Logo 片头

完整时间轴见视频页。

graphics/

分片矩阵

首屏矩阵以写入出现、以修复循环。

Micro-interactions微交互

细小、迅速、处处一致。

按钮悬停上移 1px，光带扫过150 ms standard · 420 ms emphasized

docs/阅读文档

卡片边框变为前景色，箭头移动 2px240 ms standard

查看兼容性矩阵

链接下划线从左向右生长240 ms emphasized

交互	变化	时长	缓动
按钮悬停	上移 1px；光带扫过	150 / 420 ms	standard / emphasized
按钮按下	回到原位并缩小至 98.5%	80 ms	standard
卡片悬停	边框变为前景色；箭头移动 2px	240 ms	standard / emphasized
复制	底部提示「已复制」	240 ms	emphasized
展开与收起	高度与透明度同时变化	240 ms	standard / exit
加载	分片按条带写入循环	60 ms / shard	steps(2)

Implementation实现

令牌见 tokens/tailwind.css。

CSScss

:root {
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Tailwindhtml

<button class="transition-transform duration-(--duration-fast) ease-standard hover:-translate-y-px active:scale-[.985]">
  Download RustFS
</button>

<a class="group ... transition-colors duration-(--duration-base) ease-standard hover:border-foreground">
  <svg class="transition-transform ease-emphasized group-hover:translate-x-0.5" />
</a>

须支持 prefers-reduced-motion；闪烁不超过每秒 3 次。