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

2023.07.22

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

サンプルコード

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

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
31
32
33
34
35
$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の値がきちんと出力されました。

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

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

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
@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()を使っての取得になるので、最初の変数の方法と比べると設定が少し手間です。

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

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
@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と関数で管理する方法がよさそうに思いますが、どちらの場合でもエディタの入力補完が効くので開発環境上の管理のしやすさで選ぶで問題なさそうです。

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

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
<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>

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
@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


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

Category

Tag

Recent

2025年3月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
3031