反馈与交互 · 点一下的回应
果冻扭动Jello
- 软
- 被戳了一下
- 斜着晃
元素像一块果冻被戳了一下：左右两边轮流被斜着推开，晃几下才停。它动的是斜切（skew），不是位置 —— 所以看起来是「软」，而不是「在抖」。这一个属性的差别就是它和抖动的全部分界。
什么时候用它
用在轻量的「我收到了」反馈上 —— 点了收藏、加了关注、戳了一下头像。错误提示别用它：软的东西报不了错，那种场合要的是抖动。
参数
transform: skewX 0→-11deg→9deg→-6deg→0deg · 900ms ease-out · transform-origin: center
配方
果冻扭动 → transform: skewX 0→-11deg→9deg→-6deg→0deg · 900ms ease-out · transform-origin: center
给 AI 的一句话
做一个果冻扭动：只动 transform 的 skewX，依次经过 -11deg、9deg、-6deg、最后回到 0deg，总共 900ms 用 ease-out，transform-origin 留在中心。不要加位移 —— 一旦有位移就变成抖动了。