Aug.29th,2021
CSSのイージング
“イージング(Easing)”とは加速や減速によって動きに緩急をつけることを言います。
自然界では等速の移動が見られることはほとんどないため、等速のアニメーションは人工的でやや不自然な印象を与えてしまいます。ここで、アニメーションにイージングを取り入れて加速や減速を表現することによってより自然な動きを実現することができます。
CSSの“イージング関数(Easing Functions)”は何らかの入力される進捗値から出力値を算出する関数で、“<easing-function>”値として定義されています。
イージング関数は“animation-timing-function”プロパティや“transition-timing-function”プロパティの値として使用することによってアニメーションの進捗度を制御してイージングを表現することができます。
イージング関数にはリニア・イージング関数、3次ベジェ・イージング関数、ステップ・イージング関数の3種類があります。
.sample1:hover {
transition-duration: 2s;
transition-timing-function: cubic-bezier(0,0,1,0);
transform: scale(1.5);
filter: hue-rotate(360deg);
}
.sample2:hover {
transition-duration: 2s;
transition-timing-function: cubic-bezier(0,-1,1,2);
transform: scale(1.5);
filter: hue-rotate(360deg);
}
.sample3:hover {
transition-duration: 2s;
transition-timing-function: steps(3,jump-none);
transform: scale(1.5);
filter: hue-rotate(360deg);
}
<p class="sample1">
猫は、上のかぎり黒くて、ことはみな白き。
</p>
<p class="sample2">
猫は、上のかぎり黒くて、ことはみな白き。
</p>
<p class="sample3">
猫は、上のかぎり黒くて、ことはみな白き。
</p>
猫は、上のかぎり黒くて、ことはみな白き。
猫は、上のかぎり黒くて、ことはみな白き。
猫は、上のかぎり黒くて、ことはみな白き。
リニア・イージング関数
3次ベジェ・イージング関数
“3次ベジェ・イージング関数”とは？
“3次ベジェ・イージング関数(Cubic Bézier Easing Function)”は入力される進捗値を3次ベジェ曲線に沿って変化させて出力するイージング関数です。“<cubic-bezier-easing-function>”値として表されます。
3次ベジェ・イージング関数のベジェ曲線は始点(“P0”)、第1制御点(“P1”)、第2制御点(“P2”)、終点(“P3”)によって表現され、始点(“P0”)と第1制御点(“P1”)を結ぶ直線と第2制御点(“P2”)と終点(“P3”)を結ぶ直線はそれぞれベジェ曲線の接線となります。
始点(“P0”)の座標は常に“(0,0)”、終点(“P3”)の座標は常に“(1,1)”であり、第1制御点(“P1”)、第2制御点(“P2”)を移動することで曲線を変化させることができます。
“<cubic-bezier-easing-function>”値には制御点の座標を直接指定できる“cubic-bezier()”関数といくつかのあらかじめ定義されているキーワードがあります。
“<cubic-bezier-easing-function>”値の一覧
| 関数 | 説明 |
|---|---|
| cubic-bezier() | 出力値をベジェ曲線に沿って変化させる |
| ease | “cubic-bezier(0.25, 0.1, 0.25, 1)”と同じ |
| ease-in | “cubic-bezier(0.42, 0, 1, 1)”と同じ |
| ease-out | “cubic-bezier(0, 0, 0.58, 1)”と同じ |
| ease-in-out | “cubic-bezier(0.42, 0, 0.58, 1)”と同じ |
キーワード値ごとのグラフ
3次ベジェ・イージング関数のサンプル
キーワード値
|
|
| animation-timing-function: ease; |
|---|
|
|
| animation-timing-function: ease-in; |
|
|
| animation-timing-function: ease-out; |
|
|
| animation-timing-function: ease-in-out; |
|
|
“cubic-bezier()”関数
|
|
| animation-timing-function: cubic-bezier(0,0.5,0.5,0); |
|---|
|
|
| animation-timing-function: cubic-bezier(0,1,0,0); |
|
|
| animation-timing-function: cubic-bezier(0,0,1,0); |
|
|
| animation-timing-function: cubic-bezier(1,0.25,0,0.75); |
|
|
| animation-timing-function: cubic-bezier(0.5,1.5,0.5,-1); |
|
|
| animation-timing-function: cubic-bezier(0,-1,1,2); |
|
|
ステップ・イージング関数
“ステップ・イージング関数”とは？
“ステップ・イージング関数(Step Easing Function)”は入力される進捗値を階段状に変化させて出力するイージング関数です。“<step-easing-function>”値として表されます。
“<step-easing-function>”値にはステップ数とステップ位置を指定できる“steps()”関数といくつかのあらかじめ定義されているキーワードがあります。
“<step-easing-function>”値の一覧
| 関数 | 説明 |
|---|---|
| steps() | 出力値を階段状に変化させる |
| step-start | “steps(1,start)”と同じ |
| step-end | “steps(1,end)”と同じ |
キーワード値ごとのグラフ
ステップ・イージング関数のサンプル
キーワード値
|
|
| animation-timing-function: step-start; |
|---|
|
|
| animation-timing-function: step-end; |
|
|
“steps()”関数
|
|
| animation-timing-function: steps(3,jump-start); |
|---|
|
|
| animation-timing-function: steps(3,jump-end); |
|
|
| animation-timing-function: steps(3,jump-none); |
|
|
| animation-timing-function: steps(3,jump-both); |
|
|
| animation-timing-function: steps(3,start); |
|
|
| animation-timing-function: steps(3,end); |
|
|
