过渡动画
Transition
交互模式也叫：过渡效果、动效过渡、CSS transition
一句话：元素状态变化时，让颜色、位置、大小等属性在一小段时间内平滑变化，而不是瞬间跳过去。
详细解释
没有过渡时，按钮悬停变色、面板展开都是「啪」一下瞬间完成；加上过渡，变化会在 150~300ms 内平滑完成，看起来更自然。CSS 里用 transition 属性编写，比如 transition: background-color 0.2s ease，指定哪些属性变、用多长时间、用什么缓动曲线。
过渡适合「从状态 A 到状态 B」的简单变化：悬停、展开收起、弹窗淡入、抽屉滑出。需要循环播放或分多个阶段的动画，要用 @keyframes 关键帧动画。
性能上优先对 transform 和 opacity 做过渡，对 width、height、top 做动画容易卡顿。还可以用媒体查询 prefers-reduced-motion，为开启了「减少动态效果」的用户关闭动画。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
侧边抽屉打开时从右侧滑入、关闭时滑出，用 transform 做 250ms 的过渡，缓动用 ease-out；背后的半透明遮罩同时淡入淡出；如果用户系统开启了「减少动态效果」，就去掉滑动，直接显示和隐藏。