Polish & Effects · Small finishing touches
Animated icon图标动效
- moves in place
- exaggerated
- no shape swap
The icon keeps its shape and simply moves: a bell shakes twice, a download arrow travels down and back, a heart beats once. Icons are tiny, so the travel has to be exaggerated to register — two or three pixels in absolute terms, or a fifth of its own height in relative terms.
When to use it
Use it to acknowledge that the icon was just triggered: a bell tapped, a download started, a favourite added. Note the split from icon morph: nothing changes shape here, so it cannot express a state change — that is what morphing is for.
Parameters
transform: translateY 0→3px→0 rotate ±12deg · 480ms ease-in-out · 2 cycles
Recipe
Animated icon → transform: translateY 0→3px→0 rotate ±12deg · 480ms ease-in-out · 2 cycles
One sentence for your AI
Make this bell icon move twice: rotate back and forth between ±12deg while translateY moves 3px, 2 cycles totalling 480ms with ease-in-out, and put transform-origin at the top of the bell where it hangs. Push the amplitude a little further than you think — icons are small.