- アニメーションは短く、意味がわかる長さに
- 200ms〜500ms
- 変数を使う
- 適切なイージングを選ぶ
- 加速も減速も0を起点に
- スタート->強調->終了
cubic-bezier(_, 0, _, 1);
@keyframes
で調整
- メインの動きを決める
- やりすぎない
- デュレーションとイージングを揃える
- グループ、順序、配置、ループ
Animation-delay
に気をつけるStart-offset
,duration
,end-offset
percentage($offset / $duration)
- ループには
@for
を使う $maps
のループには@each
を使う
- 変形は同時に
- アニメーションは色など毎に分ける
- それぞれの動きがどのようにユーザーに恩恵(探しやすい・見つけやすい・気づきやすい・つながりがわかる)を与えるのか説明できるようにする
- "いい感じ"を品質とは言わない
- アニメーションの長さは300ms以内にする
- イージングにはリニアを使わない(動きが緩慢で無気力、機械的に見える)
- 99%のアニメーションはシンプルな"Ease-In"か"Ease-Out"を使うべき
- スプリングやバウンスといったアニメーションは限られた状況だけで必要になる