Sassでのイージング設定を試してみる

CSSのイージングではlinear・ease・ease-in・ease-out・ease-in-outの5つのキーワードが用意されていますが、それ以外にもcubic-bezier()関数を使用することでいろいろなイージングの設定を行えます。
今回はよく利用されるイージングのパターンをSass上で使用しやすいように設定をいくつか試してみます。

サンプルコード

まずはイージング名ごとに変数を用意する方法です。
使用している値についてはCeaserを参照しています。

$easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
$easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
$easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950);

$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
$easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
$easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955);

$easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);

$easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
$easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
$easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000);

$easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
$easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
$easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000);

$easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
$easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
$easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000);

$easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335);
$easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000);
$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860);

$easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045);
$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550);

.test {
  transition: left 500ms $easeInQuad;
}

各イージングの設定については以前にjquery.easing.jsについての記事を投稿していますので、そちらをご確認ください。
ElasticとBounceについては参照元にもありませんが、cubic-bezier()では対応できないようです。

コンパイルすると、.testの値がきちんと出力されました。

.test {
  transition: left .5s cubic-bezier(.55, .085, .68, .53);
}

次に各イージング設定をmapで管理する方法です。

@use "sass:map";
$easing: (
  linear: cubic-bezier(0.250, 0.250, 0.750, 0.750),
  ease: cubic-bezier(0.250, 0.100, 0.250, 1.000),
  ease-in: cubic-bezier(0.420, 0.000, 1.000, 1.000),
  ease-out: cubic-bezier(0.000, 0.000, 0.580, 1.000),
  ease-in-out: cubic-bezier(0.420, 0.000, 0.580, 1.000),

  easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715),
  easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000),
  easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950),

  easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530),
  easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940),
  easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955),

  easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190),
  easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000),
  easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000),

  easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220),
  easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000),
  easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000),

  easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060),
  easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000),
  easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000),

  easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035),
  easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000),
  easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000),

  easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335),
  easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000),
  easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860),

  easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045),
  easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275),
  easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550)
);

.test {
  transition: left 500ms map.get($easing, easeInQuad);
}

コンパイル結果は先ほどと同様です。
map.get()を使っての取得になるので、最初の変数の方法と比べると設定が少し手間です。

前の例を少し変更して、設定するための関数を別途用意する形にしてみます。

@use "sass:map";
$easing: (
  linear: cubic-bezier(0.250, 0.250, 0.750, 0.750),
  ease: cubic-bezier(0.250, 0.100, 0.250, 1.000),
  ease-in: cubic-bezier(0.420, 0.000, 1.000, 1.000),
  ease-out: cubic-bezier(0.000, 0.000, 0.580, 1.000),
  ease-in-out: cubic-bezier(0.420, 0.000, 0.580, 1.000),

  easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715),
  easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000),
  easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950),

  easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530),
  easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940),
  easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955),

  easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190),
  easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000),
  easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000),

  easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220),
  easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000),
  easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000),

  easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060),
  easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000),
  easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000),

  easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035),
  easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000),
  easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000),

  easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335),
  easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000),
  easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860),

  easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045),
  easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275),
  easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550)
);

@function ease($easingName: ease) {
  $thisEasing: map.get($easing, ease);
  @if map.has-key($easing, $easingName) {
    $thisEasing: map.get($easing, $easingName);
  }
  @else {
    @warn "#{$easingName}は未定義のイージングです";
  }
  @return $thisEasing;
}

.test {
  transition: left 500ms ease(easeInQuad);
}

ease()という関数を使っての呼び出しになったので、前の例と比べると設定の手間は若干減りました。

実際に使用する場合は最初の変数で管理する方法か、3つ目のmapと関数で管理する方法がよさそうに思いますが、どちらの場合でもエディタの入力補完が効くので開発環境上の管理のしやすさで選ぶで問題なさそうです。

最後に一通り設定して動作を試してみます。

<h2>easeIn</h2>
<div class="box"><div class="easeInSine">easeInSine</div></div>
<div class="box"><div class="easeInQuad">easeInQuad</div></div>
<div class="box"><div class="easeInCubic">easeInCubic</div></div>
<div class="box"><div class="easeInQuart">easeInQuart</div></div>
<div class="box"><div class="easeInQuint">easeInQuint</div></div>
<div class="box"><div class="easeInExpo">easeInExpo</div></div>
<div class="box"><div class="easeInCirc">easeInCirc</div></div>
<div class="box"><div class="easeInBack">easeInBack</div></div>

<h2>easeOut</h2>
<div class="box"><div class="easeOutSine">easeOutSine</div></div>
<div class="box"><div class="easeOutQuad">easeOutQuad</div></div>
<div class="box"><div class="easeOutCubic">easeOutCubic</div></div>
<div class="box"><div class="easeOutQuart">easeOutQuart</div></div>
<div class="box"><div class="easeOutQuint">easeOutQuint</div></div>
<div class="box"><div class="easeOutExpo">easeOutExpo</div></div>
<div class="box"><div class="easeOutCirc">easeOutCirc</div></div>
<div class="box"><div class="easeOutBack">easeOutBack</div></div>

<h2>easeInOut</h2>
<div class="box"><div class="easeInOutSine">easeInOutSine</div></div>
<div class="box"><div class="easeInOutQuad">easeInOutQuad</div></div>
<div class="box"><div class="easeInOutCubic">easeInOutCubic</div></div>
<div class="box"><div class="easeInOutQuart">easeInOutQuart</div></div>
<div class="box"><div class="easeInOutQuint">easeInOutQuint</div></div>
<div class="box"><div class="easeInOutExpo">easeInOutExpo</div></div>
<div class="box"><div class="easeInOutCirc">easeInOutCirc</div></div>
<div class="box"><div class="easeInOutBack">easeInOutBack</div></div>

@use "sass:map";
$easing: (
  linear: cubic-bezier(0.250, 0.250, 0.750, 0.750),
  ease: cubic-bezier(0.250, 0.100, 0.250, 1.000),
  ease-in: cubic-bezier(0.420, 0.000, 1.000, 1.000),
  ease-out: cubic-bezier(0.000, 0.000, 0.580, 1.000),
  ease-in-out: cubic-bezier(0.420, 0.000, 0.580, 1.000),

  easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715),
  easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000),
  easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950),

  easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530),
  easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940),
  easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955),

  easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190),
  easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000),
  easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000),

  easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220),
  easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000),
  easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000),

  easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060),
  easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000),
  easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000),

  easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035),
  easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000),
  easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000),

  easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335),
  easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000),
  easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860),

  easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045),
  easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275),
  easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550)
);

@function ease($easingName: linear) {
  $thisEasing: map.get($easing, linear);
  @if map.has-key($easing, $easingName) {
    $thisEasing: map.get($easing, $easingName);
  }
  @else {
    @warn "#{$easingName}は未定義のイージングです";
  }
  @return $thisEasing;
}

.box {
  margin: 40px;
  background: lightgray;
}
.box div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 50px;
  margin-left: 0;
  background: skyblue;
  transition-property: margin-left;
  transition-duration: 500ms;
}
.box:hover div {
  margin-left: 300px;
}
.easeInSine {
  transition-timing-function: ease(easeInSine);
}
.easeOutSine {
  transition-timing-function: ease(easeOutSine);
}
.easeInOutSine {
  transition-timing-function: ease(easeInOutSine);
}
.easeInQuad {
  transition-timing-function: ease(easeInQuad);
}
.easeOutQuad {
  transition-timing-function: ease(easeOutQuad);
}
.easeInOutQuad {
  transition-timing-function: ease(easeInOutQuad);
}
.easeInCubic {
  transition-timing-function: ease(easeInCubic);
}
.easeOutCubic {
  transition-timing-function: ease(easeOutCubic);
}
.easeInOutCubic {
  transition-timing-function: ease(easeInOutCubic);
}
.easeInQuart {
  transition-timing-function: ease(easeInQuart);
}
.easeOutQuart {
  transition-timing-function: ease(easeOutQuart);
}
.easeInOutQuart {
  transition-timing-function: ease(easeInOutQuart);
}
.easeInQuint {
  transition-timing-function: ease(easeInQuint);
}
.easeOutQuint {
  transition-timing-function: ease(easeOutQuint);
}
.easeInOutQuint {
  transition-timing-function: ease(easeInOutQuint);
}
.easeInExpo {
  transition-timing-function: ease(easeInExpo);
}
.easeOutExpo {
  transition-timing-function: ease(easeOutExpo);
}
.easeInOutExpo {
  transition-timing-function: ease(easeInOutExpo);
}
.easeInCirc {
  transition-timing-function: ease(easeInCirc);
}
.easeOutCirc {
  transition-timing-function: ease(easeOutCirc);
}
.easeInOutCirc {
  transition-timing-function: ease(easeInOutCirc);
}
.easeInBack {
  transition-timing-function: ease(easeInBack);
}
.easeOutBack {
  transition-timing-function: ease(easeOutBack);
}
.easeInOutBack {
  transition-timing-function: ease(easeInOutBack);
}

イージング設定のデモページ

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年2月
 123
45678910
11121314151617
18192021222324
2526272829