CSS イージングカーブ

よくある質問

この値はどこに入れますか？

transition-timing-function や animation-timing-function プロパティ、または transition ショートハンドのタイミング枠（例：transition: transform .3s cubic-bezier(0.33, 1, 0.68, 1)）に入れます。キーワード項目（ease、ease-in など）はブラウザ内蔵で、cubic-bezier() 値もすべてのモダンブラウザで動作します。

スウォッチの読み方は？

横軸が開始から終了までの時間、縦軸が値の進み具合です。緩やかに始まり急に終わるカーブ（ease-in）はゆっくり出発して加速し、逆の形（ease-out）は速く出発して滑らかに止まります。薄い2本の横線が 0 と 1 の基準線で、back 系がはみ出す区間が見て取れます。

out 系と in 系はどう使い分けますか？

UI では ease-out 系が事実上のデフォルトです。動きが速く始まり減速しながら収まると、インターフェースが機敏に感じられます。ease-in 系は主に画面から去る要素に、in-out 系はカードの位置移動のように画面内で始まり画面内で終わる動きに使います。

back カーブの負の値はどういう意味ですか？

制御点が 0～1 の範囲を外れると、値が始点や終点を少し行き過ぎてから戻ります。小さなバウンスとして読める効果なので translate・scale などの transform には合いますが、opacity のように範囲がクランプされるプロパティでは行き過ぎが単に切り捨てられるため避けるのが無難です。