动效时长 · Duration
英文：Duration
动效与交互难度：入门 ★
🗣️一句话大白话
一段动效从开始到结束的时间。太短看不清、太长拖节奏；微交互 150-300ms、组件 300ms 档、页面转场 400-500ms 是安全区。时长是动效最容易翻车的参数。AI 默认时长常常偏长（500ms 以上），导致页面"黏糊糊"。给 AI 报时长要具体：按钮反馈 150-200ms、卡片入场 300ms、弹窗 250-350ms、页面转场 400-500ms。原则：大元素慢、小元素快，关闭比打开略快。
🎬真实场景
一切动效的基础参数
📮你可以这样说
「【图像模型版】分镜标注每段动效的时长（毫秒级），如按钮 180ms、卡片 300ms、弹窗 300ms，避免全部 500ms 拖节奏。 【HTML/CSS/JS 版】给 [弹窗] 加过渡动效：打开 300ms、关闭 220ms（关闭略快），缓动 ease-out。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：动画越长越有质感；实际超 500ms 就拖节奏
- ▸时长不写单位或写"快一点"AI 无法换算
🚫什么时候别用
- ✗无；任何动效都要明确时长
🧩常见变体
微交互 150-200ms组件 250-350ms页面转场 400-500ms
💡小贴士
- ✦关闭动效比打开快 20-30%，界面更干脆
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（上篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗