【CSS3】アニメーション曲線を定義する transition-timing-function の「cubic-bezier()」の値をまとめてみた。

Ads by Google

CSS3 badge

ご存知のとおり、CSS3の「transition-timing-function」では時間毎のアニメーションの変化を指定することができます。

標準では次の値が用意されています。

  • ease … 初期値
  • linear … 一定
  • ease-in … ゆっくり始まる
  • ease-out … ゆっくり終わる
  • ease-in-out …ゆっくり始まってゆっくり終わる
  • cubic-bezier() … カスタムで指定可能

今日はこの中の「cubic-bezier()」に焦点を当てて、指定できる値をまとめてみました。

正弦曲線(Sine Curve)

sineEaseIn(jQueryEasing : easeInSine)
$easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
sineEaseOut(jQueryEasing : easeOutSine)
$easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1)
sineEaseInOut(jQueryEasing : easeInOutSine)
$easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95)

二次曲線(Quadratic Curve)

quadraticEaseIn(jQueryEasing : easeInQuad)
$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53)
quadraticEaseOut(jQueryEasing : easeOutQuad)
$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94)
quadraticEaseInOut(jQueryEasing : easeInOutQuad)
$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955)

三次曲線(Cubic Curve)

cubicEaseIn(jQueryEasing : easeInCubic)
$easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19)
cubicEaseOut(jQueryEasing : easeOutCubic)
$easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1)
cubicEaseInOut(jQueryEasing : easeInOutCubic)
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1)

四次曲線(Quartic Curve)

quarticEaseIn(jQueryEasing : easeInQuart)
$easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22)
quarticEaseOut(jQueryEasing : easeOutQuart)
$easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1)
quarticEaseInOut(jQueryEasing : easeInOutQuart)
$easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1)

五次曲線(Quintic Curve)

quinticEaseIn(jQueryEasing : easeInQuint)
$easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06)
quinticEaseOut(jQueryEasing : easeOutQuint)
$easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1)
quinticEaseInOut(jQueryEasing : easeInOutQuint)
$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1)

指数曲線(Exponential Curve)

exponentialEaseIn(jQueryEasing : easeInExpo)
$easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035)
exponentialEaseOut(jQueryEasing : easeOutExpo)
$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1)
exponentialEaseInOut(jQueryEasing : easeInOutExpo)
$easeInOutExpo: cubic-bezier(1, 0, 0, 1)

円曲線(Circular Curve)

circularEaseIn(jQueryEasing : easeInCirc)
$easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335)
circularEaseOut(jQueryEasing : easeOutCirc)
$easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1)
circularEaseInOut(jQueryEasing : easeInOutCirc)
$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86)

あと戻りする曲線(Back)

backEaseIn(jQueryEasing : easeInBack)
$easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045)
backEaseOut(jQueryEasing : easeOutBack)
$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275)
backEaseInOut(jQueryEasing : easeInOutBack)
$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55)

弾性曲線(Elastic Curve)

ElasticEaseIn(jQueryEasing : easeInElastic)
再現不可能
ElasticEaseOut(jQueryEasing : easeOutElastic)
再現不可能
ElasticEaseInOut(jQueryEasing : easeInOutElastic)
再現不可能

跳ね返り(Bounce)

ElasticEaseIn(jQueryEasing : easeInBounce)
再現不可能
ElasticEaseOut(jQueryEasing : easeOutBounce)
再現不可能
ElasticEaseInOut(jQueryEasing : easeInOutBounce)
再現不可能

jQueryEasingでの指定と共に、SASS仕様で変数化しているので使いやすいかと思います。
コピペして、ぜひご利用ください。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google