For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/foundations/motion.md.
  • 简体中文
  • next
  • 动效

    动效用于解释状态变化,不应拖慢操作。A3S UI 为悬停、焦点、导航与可调整布局提供短时过渡,不使用纯装饰性的页面动画。

    Live previewHTML · CSS · JavaScript

    时长

    时长用途
    120ms颜色与焦点反馈
    160–180ms卡片抬升、导航显示与小范围布局变化
    200–240msDialog 或 Drawer 进入

    缓动

    可逆界面反馈使用标准 ease。表面进入视口使用 ease-out,离开视口使用 ease-in。Split Pane 调整等连续指针交互应直接更新,不添加过渡。

    减少动效

    包含非必要过渡或布局变化的组件会在 prefers-reduced-motion: reduce 下禁用动效。产品不能只依赖动画表达状态。