反模式 · 动效 · 中
从 scale(0) 开始动画
从 scale(0) 起手指浮层从自身中心凭空放大,而不是从触发它的元素长出来。
症状
菜单、提示气泡、弹层从自身中心的某一点放大展开。
为什么会这样
scale(0) → scale(1) 是各动画库演示里的标准「弹出」效果。而且它在不知道触发器位置时也最容易写出来。
规则
从 0.95–0.98 起手,transform-origin 设在触发器那条边,不要从零开始。
- 把 transform-origin 设到最靠近触发器的角或边。
- 从 scale(0.96) 配 4-8px 朝触发器方向的位移开始。
- 整个进场控制在 200ms 内,让关联感立刻成立。
从 scale(0) 开始动画是什么?
从 scale(0) 长大的下拉菜单,看起来是在半空中凭空生成,与你刚按下的按钮毫无关联。动效应该描述因果之间的关系:面板来自触发器。把 transform-origin 设到触发器的那条边,从一个很小的偏移起手——0.95 配 8px 位移读作「相连」,0 读作「瞬移」。
修复 Prompt
贴在你现有 Prompt 之后,把这类毛病从结果里剥掉。