思っているよりも短くすること
- 単一のトランジションは0.15〜0.4秒
- 速すぎると思うくらいまで速くしてから、少しずつ戻していく
アクションをカーブに合わせること
- 動きは色と同じくらい主観的だが、それと同じくらい重要
- 現実世界の動きを考えて比較すること
加速と減速
- アニメーションが不自然なら、突然始まったり終わったりしているのが原因
- わずかでも
cubic-bezier カーブに easing-in/out を加えるのがよい
- 本物らしく見せるなら「慣性（Inertia）」も有効
少ないほどよい
- アニメーション中に要素が多く変化するほど、やりすぎに見えるリスクが高まる
- 不透明度を0から1にするなら、1ではなく0.4を試してみる。サイズを変えるなら、少しだけ小さい状態から始めてみる
- 多くの場合、元の位置に戻るアニメーションは5〜40ピクセルの範囲で動かすべき
ブラウザのデフォルトは避けること
- ブラウザには
linear、ease、ease-in、ease-out、ease-in-out のようなカーブが組み込まれている
- 手軽で特定の状況では便利だが、あまりに一般的なので全部同じに見えてしまう（Bootstrap/Tailwindで作られたサイトがどれも似て見えるのと同じように）
- VS Codeにある
cubic-bezier カーブの自動補完値を使ってみること
- あるいはブラウザの開発者ツールを開いて、カーブエディタを使ってみること
複数のプロパティ、複数の easing
- いつでも有用というわけではないが、複数のプロパティを同時に変更する必要があるとき（
transform と opacity を同時に変更する場合）
- 同じ
cubic-bezier カーブを適用してうまく見えることもあるが、実際にはそうでないこともある
transform でうまく機能するカーブでも、fade には合わないことがある- こういうときはCSSプロパティごとに異なる easing を選ぶのがよい
- プロパティごとに
@keyframes アニメーションを分けるか、複数の transition を選べる
opacity には linear、transform には cubic-bezier(.5, 0, .5, 1)
ずらした遅延を使う
- 複数の要素をトランジションさせるときは、
animation-delay または transition-delay の効果を過小評価しないこと
Inは出ていき、Outは入ってくる
- イージングカーブには3つの種類がある
- ease in（ゆっくり始まる）
- ease out（ゆっくり終わる）
- in-out（中央だけ速く、始めと終わりは遅い）
- トランジションの厄介な点は、しばしば in を ease-out にしたくなり、out を ease-in にしたくなることがある点
- 1つが出ていき、もう1つが入ってくるアニメーションは、ユーザーからは1つの切り替えに見えるが、内部的には2つの切り替え
- 出ていく方はゆっくりにしたいので ease-in が必要で、入ってくる方は ease-out であるべき
ハードウェアアクセラレーションに頼る
- すべてのCSSプロパティが、すべてのデバイス＆ブラウザで滑らかに動作するわけではない
- 常にハードウェアアクセラレーション可能なプロパティ
transform（すべての translate、scale、rotate および3D版まで）opacity
- 場合によってハードウェアアクセラレーション可能なプロパティ
- 特定のSVGプロパティ
filter（ブラウザやフィルタによる）
- Canvas や WebGL もハードウェアアクセラレーションされるが、ここでは扱わない
- つまり、移動、サイズ変更、回転を行うなら、常にCSSの
transform プロパティを使うこと
- 何をするにしても、要素のサイズや位置を直接変更しないこと
height、width、border、margin、padding のようにページレイアウトへ影響するプロパティを直接変更すると、ページ速度が目に見えて遅くなるリスクがある
必要なら will-change を使う
- 理論上はアニメーションが滑らかで高性能なはずなのに、不自然に見えるなら
will-change プロパティを使うこと
- 何が変わるかを事前に伝えることで、ほかの計算を省略できる
おまけ：ユーザーの好みを尊重する
- ユーザーはデバイス設定で「reduced motion」を好むかどうか指定できる
- メディアクエリを使うかJavaScript経由でこの値を認識し、それに合わせて対応できる
まだコメントはありません。