ディテールと演出 · 仕上げの小技
アニメーションアイコン图标动效
- その場で動く
- 大げさに
- 形は変えない
アイコンは形を変えず、その場で動くだけです。ベルは二回揺れ、ダウンロードの矢印は下へ行って戻り、ハートは一度跳ねます。アイコンは小さいので、見えるためには動きを大げさにする必要があります。絶対値で 2〜3px、比率で高さの二割以上です。
使いどころ
「このアイコンが今押された」確認に使います（ベルのタップ、ダウンロード開始、お気に入り追加）。アイコン変形との違いに注意してください。こちらは形が変わらないので状態の切り替えは表せません。それは変形の役目です。
パラメータ
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 に渡す一文
このベルのアイコンを二回動かしてください。rotate を ±12deg で往復させ、同時に translateY を 3px 動かします。2 サイクル、合計 480ms、ease-in-out で。transform-origin はベルの吊り点（上端）に置きます。思うより大きめにしないと見えません。アイコンは小さいからです。