transitionとかanimationの実行中に「どのように値を変化させるか」を指定できる〇〇-timing-functionですが、指定できる値が多い上に一部理解しにくいものもあるので、一覧をサンプル付きでまとめました。

後半にはcubic-bezierの設定例も載せておきますんで、コピペで使ってくださいな。

基本形

まずは一番よく使うであろう基本形の挙動を見てみます。

See the Pen transition-timing-function_1 by Leo_8192 (@Leo_8192) on CodePen.

ease

ease-in

ease-out

ease-in-out

linear

凝ったことをしないのであれば、この中から選んでおけば間違いありません。

steps( n, <jumpterm>)

steps(n,<jumpterm>)を使えば、ストップモーションアニメのような効果を付けることが可能です。ただ、停止位置の挙動が少し理解しにくいかも。

See the Pen transition-timing-function_2 by Leo_8192 (@Leo_8192) on CodePen.

steps(n, jump-start)

steps(n, jump-end)

steps(n, jump-none)

steps(n, jump-both)

これ使ったことないんですが、もし使うとしたらjump-noneかjump-bothが分かりやすいかなぁ…

cubic-bezier(p1,p2,p3,p4)

3次ベジェ曲線を使った小難しい指定方法です。これ説明するの難しいんで、どういう仕組なのか気になる人は視覚的に覚えることが出来るジェネレーターツールを使いましょう。多分、数値を適当にいじるだけでは理解できません。

とりあえずすぐに使えそうな設定値を量産しといたので、気に入ったものがあればコピペして使ってみてね！

ease-in-out系

See the Pen transition-timing-function_4 by Leo_8192 (@Leo_8192) on CodePen.

ease-in系,ease-out系

See the Pen transition-timing-function_3 by Leo_8192 (@Leo_8192) on CodePen.

特殊系

See the Pen transition-timing-function_5 by Leo_8192 (@Leo_8192) on CodePen.

最後のは使い道がなさそうですが、ease系は普通に指定するより滑らかに動かすことが出来るので、痒いところに手が届きます。

最後に

今回cubic-bezierの設定例は全て0.25刻みというキリのいい数値で作っているので、こだわりたい人は数値を微調整したほうがいいかも。

あと、duration（変化に掛かる時間）によって受けるイメージが変わる、という事もよくあるので、そこらへんの調整もいい感じに頑張りましょう（適当）。

この記事が気に入ったらフォロー・シェアしてね！

Twitter Feedly