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

2023.07.22

HTML・CSS

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);
}

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

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

サンプルコード

コメントを残すコメントをキャンセル

Category

Tag

Recent

2024年4月
日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

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

サンプルコード

関連記事

Sassのマップで複数のカテゴリ情報を管理する

SVGのアニメーションでイージングを設定する

Sassで0始まりの数値を使用した際、コンパイル後に0が省略される

Lottieで作成されたアニメーションの制御を試してみる

Sassの@debug・@warn・@errorを使ってみる

コメントを残す コメントをキャンセル

Category

Tag

Recent

コメントを残すコメントをキャンセル