细节与特效 · 耐看的小细节
图标动效Animated icon
- 自己动一下
- 幅度夸张
- 不换图形
图标不换图形，只是自己动一下：铃铛摇两下、下载箭头往下走一趟、心形跳一下。图标很小，所以幅度必须夸张才看得见 —— 按像素算是两三像素，按比例算得占它身高的两成以上。
什么时候用它
用在「这个图标刚刚被触发」的确认上 —— 点了铃铛、点了下载、点了收藏。注意它和图标形变的分别：这一条图形不变，所以不能用来表示状态切换，那种场合要的是形变。
参数
transform: translateY 0→3px→0 rotate ±12deg · 480ms ease-in-out · 2 cycles
配方
图标动效 → transform: translateY 0→3px→0 rotate ±12deg · 480ms ease-in-out · 2 cycles
给 AI 的一句话
让这个铃铛图标动两下：transform 的 rotate 在 ±12deg 之间来回、同时 translateY 上下 3px，共 2 个循环、总计 480ms、ease-in-out，用 transform-origin 把支点放在铃铛顶部（挂点）。幅度一定要比你想的大一点才看得见 —— 图标太小了。