淡入淡出 · Fade
英文：Fade
动效与交互难度：入门 ★
🗣️一句话大白话
透明度从 0→1（淡入）或 1→0（淡出）。最基础也最安全，几乎不会出错的动效。AI 做"让 X 出现"时默认可能是突然出现（无过渡）。说"fade in 300ms"它就懂。淡入适合轻微强调、弹窗遮罩、图片懒加载；纯 fade 单用显平淡，常配 8-16px 位移或轻微缩放增加质感。
🖼️样图参考
🎬真实场景
图片加载、遮罩层、弹窗、轻量元素进场
📮你可以这样说
「【图像模型版】让 [元素] 淡入：透明度 0→100%，同时从下方 12px 移到原位，时长 400ms，先快后慢。 【HTML/CSS/JS 版】[元素] 入场用 opacity 0→1 + translateY(12px)→0，时长 400ms，缓动 ease-out。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：fade 就是改 opacity；实际可叠加位移/缩放才有层次
- ▸纯透明淡入视觉偏平淡
🚫什么时候别用
- ✗需要传达方向感的场合（用 slide）
🧩常见变体
纯淡入淡入+位移淡入+缩放
💡小贴士
- ✦淡入配 8-16px 位移，比纯透明更有层次
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（上篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗