反馈与交互 · 点一下的回应
摇摆Swing
- 挂着
- 荡回来
- 支点在顶上
元素像挂在钉子上的牌子，绕着顶边左右摆几下，幅度一次比一次小，最后停住。支点在顶上，所以它是「荡」不是「转」—— 这一切全靠 transform-origin 决定，写在中心就完全变成另一个动效。
什么时候用它
用在真的有「悬挂感」的东西上 —— 吊牌、铃铛、灯笼、节日装饰。用在方块按钮上会很怪：一个方块没有可以被挂住的边。
参数
transform-origin: top center · transform: rotate 0→15deg→-10deg→5deg→0deg · 1000ms ease-in-out
配方
摇摆 → transform-origin: top center · transform: rotate 0→15deg→-10deg→5deg→0deg · 1000ms ease-in-out
给 AI 的一句话
做一悬挂物摇摆：transform-origin 设在 top center，rotate 依次经过 15deg、-10deg、5deg、回到 0deg，总 1000ms 用 ease-in-out。origin 一定不能省 —— 省了就绕中心转，那是完全另一回事。