このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

イージング

記事Aug.29th,2021
CSSでアニメーションの進捗度などを制御するために使用できるイージング関数について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

CSSのイージング

イージング(Easing)”とは加速や減速によって動きに緩急をつけることを言います。

自然界では等速の移動が見られることはほとんどないため、等速のアニメーションは人工的でやや不自然な印象を与えてしまいます。ここで、アニメーションにイージングを取り入れて加速や減速を表現することによってより自然な動きを実現することができます。

CSSの“イージング関数(Easing Functions)”は何らかの入力される進捗値から出力値を算出する関数です。

イージング関数のイメージ

イージング関数を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>

猫は、上のかぎり黒くて、ことはみな白き。

猫は、上のかぎり黒くて、ことはみな白き。

猫は、上のかぎり黒くて、ことはみな白き。

仕様書

定義されている仕様書
Level 1
勧告候補(CR)
linear
定義あり
cubic-bezier()
定義あり
ease
定義あり
ease-in
定義あり
ease-out
定義あり
ease-in-out
定義あり
steps()
定義あり
step-start
定義あり
step-end
定義あり

リニア・イージング関数

“リニア・イージング関数”とは?

リニア・イージング関数(Linear Easing Function)”は恒等関数で、出力される進捗値は入力される進捗値と等しくなります。

リニア・イージング関数は“linear”キーワードで表されます。

リニア・イージング関数

リニア・イージング関数のサンプル

animation-timing-function: linear;

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)”、終点(“P0”)の座標は常に“(1,1)”であり、第1制御点(“P1”)、第2制御点(“P2”)を移動することで曲線を変化させることができます。

“cubic-bezier()”関数のイメージ

<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)”と同じ
キーワード値ごとのグラフ
“ease”
“ease-in”
“ease-out”
“ease-in-out”

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)”と同じ
キーワード値ごとのグラフ
“step-start”
“step-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);
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク