渐入渐出
Fade In / Out
初级通用渐入渐出（Fade In / Out）是让元素的透明度随时间变化，使它逐渐出现或消失的动画。它能缓和界面内容突然切换带来的跳动感，比如让操作成功后的轻提示慢慢显现，再慢慢淡去。
你可能会说：「我想让提示消息出现和消失时别突然闪一下，而是慢慢变清楚、再慢慢淡掉。」
动手看看保存资料后的成功提示
提示状态
淡入淡出时长
切换「提示状态」看成功提示渐入或渐出；再换时长对比，也可以点重播。这里变化的是透明度，提示的位置不会移动。
650 毫秒能看清透明度的变化，又不会让这条轻提示显得太拖沓。
要点渐入渐出是怎么起作用的？
- 1
变化的是元素的透明度
渐入通常是从透明变为可见，渐出则反过来。你看到的文字、颜色和位置可以都不变，只有透明度在变化；这样就能让新内容出现得不突兀。
- 2
出现和消失要对应状态
比如轻提示出现时渐入，停留一段时间后渐出。我们得把动画和组件的显示状态接起来，因为只把透明度调到零，元素可能仍占着位置，甚至还能被点击。
- 3
时长取决于信息的用途
轻提示可以较快淡入淡出，让用户看见变化又不必等待；需要阅读的内容则不能还没看清就消失。你可以让 AI 同时检查停留时间，而不只调整动画时长。
容易混淆的地方
渐入渐出说的是透明度如何随时间变化；渐变说的是颜色或明暗在空间中的连续变化，一张静止的渐变背景不算渐入。过渡则是更宽泛的状态变化方式：元素从透明变为可见，可以用过渡实现渐入，也可以用动画实现。
什么时候用
适合用
- 网站提交表单后出现轻提示，用渐入让用户注意到结果，再渐出收起提示。
- AI 工具生成完回答后展示补充操作栏，用渐入缓和它突然出现的感觉。
- 图片加载完成并准备替换占位内容时，用渐入减少画面切换的突兀感。
不适合用
- 后台出现付款失败等需要用户处理的警告时，别让它自动渐出；改用持续显示的警告提示。
- 用户需要知道上传还要多久时，别用反复渐入渐出代替状态信息；改用进度条。
- 只是想让卡片从下方进入视野时，单靠渐入表达不出位移；改用包含位移动画的方案。
练一练选一个答案，看看解释
你在做一个 AI 写作工具：复制回答后，页面要短暂显示“已复制”。哪种方案最符合渐入渐出的用法？
让 AI 帮你做复制给 AI Agent 直接用
请给复制成功后的“已复制”轻提示加入渐入渐出：出现时从透明变为可见，停留到用户能读清后再渐出并移除；渐出期间避免不可见元素拦截点击，同时照顾偏好减少动效的用户。