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仕様で変数化しているので使いやすいかと思います。
コピペして、ぜひご利用ください。