正直 cubic-bezier が苦手なエンジニアへ
え!?
timing-function にまだ標準プリセット使ってるの？（ease, ease-in, ease-out, ease-in-out）
そんなあなたも勉強不要。
コピペで使えるCSSアニメーションの最強 transition テンプレートで、cubic-bezier を使いこなそう！
- 適当で良いからと言われて 本当に適当に作ったら見た目のところで批判される 動作モック。
- 誰もこだわらないけど 新作なのに最初からアンティークな雰囲気漂う 管理画面。
- お任せしますと言われて 任された気持ちで作ったらそこだけ完全に浮いてる インタラクションパーツ。
などのシーンで困っても、もう大丈夫。
コピペで使える transition をまとめてみました。
ナチュラル
考えてる場合じゃない時に。
他の transition と合わせて使っても台無しにならない汎用タイプ。
transition: all 400ms cubic-bezier(0.360, 0.100, 0.160, 1.000);
See the Pen transition: natural by Yusuke Nakaya (@YusukeNakaya) on CodePen.
軽快
凝った演出より、短い duration でキビキビ動かしたい時に。
魂は刹那に宿る。
transition: all 200ms cubic-bezier(0.320, 0.625, 0.580, 1.000);
See the Pen transition: light by Yusuke Nakaya (@YusukeNakaya) on CodePen.
スタイリッシュ
シャープな印象を出したい時に。
「シュッとした感じに」と言われたらコレ。
transition: all 500ms cubic-bezier(0.170, 0.935, 0.305, 1.000);
See the Pen transition: quick by Yusuke Nakaya (@YusukeNakaya) on CodePen.
ポップ
ゲームコンテンツなどポップな印象を出したい時に。
特徴的な動きで使いにくいが、ハマるデザインなら見栄えよし。
transition: all 700ms cubic-bezier(0.330, 1.700, 0.510, 0.820);
See the Pen transition: pop by Yusuke Nakaya (@YusukeNakaya) on CodePen.
ふんわり
まったりした印象を出したい時に。
長めの duration はユーザー操作の邪魔にならないよう注意。
transition: all 1000ms cubic-bezier(0.545, 0.080, 0.520, 0.975);
See the Pen transition: relax by Yusuke Nakaya (@YusukeNakaya) on CodePen.
気をつけること
- timing-function の標準プリセットは表現の幅が狭いため、できるだけ cubic-bezier を使う。
- これらのテンプレートも duration を変更するだけで、結構雰囲気が変わるので色々試す。
- transition はサイト/アプリケーション内で共通化しておくとバランスが崩れにくい。