For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.4.0/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.4.0/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.4.0/foundations/motion.md.

动效

动效只解释来源、连续性或完成,不延迟操作,也不让静态卡片悬浮。元素从可用、可见的初始状态进入最终状态,因此低性能设备不会先看到空白界面。

实时预览

时长

令牌时长用途
--a3s-motion-fast120ms按下、焦点与短颜色反馈
--a3s-motion-normal160ms悬停、选择与小范围布局反馈
--a3s-motion-overlay220msMenu、Popover、Dialog 与 Drawer

连续指针交互,例如 Split Pane 调整和 Slider 拖动,直接跟随输入,不添加追赶动画。按下控件最多移动 1px;卡片悬停不上移。

缓动

进入与可逆反馈使用指数型缓出曲线 --a3s-ease-out: cubic-bezier(0.16, 1, 0.3, 1)。退出可以复用同一曲线缩短时长,但不能超过 220ms。避免同时对大量布局属性、模糊和阴影做长时间过渡。

减少动效

在 prefers-reduced-motion: reduce 下移除位移、缩放、模糊动画与循环装饰,同时保留即时状态变化。加载、流式输出和进度不能只依赖动画表达。