2017月07月04日

CSS transition テンプレ 5選

正直 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 はサイト/アプリケーション内で共通化しておくとバランスが崩れにくい。

RELATED POSTS