动效系统
所有过渡统一使用 cubic-bezier(0.16, 1, 0.3, 1)。微交互 150ms，状态切换 200–250ms，面板展开 300ms；入场动画只播放一次，不随滚动触发。
14 · MOTION · 动效系统
核心缓动曲线
expo-out
cubic-bezier(0.16,1,0.3,1)
卡片 Hover（450ms）
微交互（200ms）
时长阶梯对照
展示型
微交互200-250ms
状态切换250-350ms
卡片 hover450ms
入场动画800ms
数字滚动1600ms
管理型
微交互150ms
状态切换200ms
卡片 hover300ms
入场动画200ms
数字滚动1000ms
<section id="motion" class="section">
<div class="section-title">14 · MOTION · 动效系统</div>
<div class="demo-box">
<div class="demo-sub">核心缓动曲线</div>
<div class="flex items-center gap-6 mb-6">
<div class="text-center">
<div class="font-mono text-[12px] text-ink-500 mb-2">expo-out</div>
<div class="w-24 h-24 border border-ink-200 rounded relative overflow-hidden">
<svg viewBox="0 0 100 100" class="w-full h-full">
<path d="M0,100 C16,0 30,0 100,0" fill="none" stroke="#185058" stroke-width="2"/>
<line x1="0" y1="100" x2="100" y2="0" stroke="#E4E4E7" stroke-width="1" stroke-dasharray="4"/>
</svg>
</div>
<div class="font-mono text-[10px] text-ink-400 mt-1">cubic-bezier(0.16,1,0.3,1)</div>
</div>
<div class="flex-1 space-y-4">
<div>
<div class="text-[12px] text-ink-600 mb-1">卡片 Hover（450ms）</div>
<div class="w-16 h-16 bg-white border border-ink-200 rounded-lg transition-all duration-[450ms] hover:translate-y-[-4px] hover:shadow-lg cursor-pointer" style="transition-timing-function:cubic-bezier(.16,1,.3,1)"></div>
</div>
<div>
<div class="text-[12px] text-ink-600 mb-1">微交互（200ms）</div>
<button class="px-4 py-2 bg-ink-900 text-white text-[12px] rounded transition-all duration-200 hover:bg-cdx-700" style="transition-timing-function:cubic-bezier(.16,1,.3,1)">Hover me</button>
</div>
</div>
</div>
<div class="demo-sub">时长阶梯对照</div>
<div class="grid grid-cols-2 gap-4">
<div class="border border-ink-100 rounded p-4">
<div class="text-[12px] font-semibold text-ink-700 mb-3">展示型</div>
<div class="space-y-2 text-[12px]">
<div class="flex justify-between"><span class="text-ink-600">微交互</span><span class="font-mono text-cdx-700">200-250ms</span></div>
<div class="flex justify-between"><span class="text-ink-600">状态切换</span><span class="font-mono text-cdx-700">250-350ms</span></div>
<div class="flex justify-between"><span class="text-ink-600">卡片 hover</span><span class="font-mono text-cdx-700">450ms</span></div>
<div class="flex justify-between"><span class="text-ink-600">入场动画</span><span class="font-mono text-cdx-700">800ms</span></div>
<div class="flex justify-between"><span class="text-ink-600">数字滚动</span><span class="font-mono text-cdx-700">1600ms</span></div>
</div>
</div>
<div class="border border-ink-100 rounded p-4">
<div class="text-[12px] font-semibold text-ink-700 mb-3">管理型</div>
<div class="space-y-2 text-[12px]">
<div class="flex justify-between"><span class="text-ink-600">微交互</span><span class="font-mono text-cdx-700">150ms</span></div>
<div class="flex justify-between"><span class="text-ink-600">状态切换</span><span class="font-mono text-cdx-700">200ms</span></div>
<div class="flex justify-between"><span class="text-ink-600">卡片 hover</span><span class="font-mono text-cdx-700">300ms</span></div>
<div class="flex justify-between"><span class="text-ink-600">入场动画</span><span class="font-mono text-cdx-700">200ms</span></div>
<div class="flex justify-between"><span class="text-ink-600">数字滚动</span><span class="font-mono text-cdx-700">1000ms</span></div>
</div>
</div>
</div>
</div>
</section>安装
在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。
<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>使用方式
在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。
组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。
设计规范
完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。