ywork2020.com

Title

アニメーション周期の中でのタイミングの指定

目次 (INDEX)

animation-timing-functionとは

ここで説明するanimation-timing-function とは次の語句からなるCSSのプロパティです。
animation
読み: アニメーション
意味: 動画、アニメーション
timing
読み: タイミング
意味: 時間差、時機、瞬間
function
読み: ファンクション
意味: 働き、作用、関数

目次に戻る

animation-timing-functionプロパティの概要

このプロパティはアニメーション周期の中でのタイミングの指定をします。

つまりアニメーションの開始から終わりの間に時間軸をどのように進行させるのかを指定するプロパティです。 CSSには2種類のタイミング関数に対応しており、キーワードまたは関数で指定します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{animation-timing-function: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルではdiv要素に対してanimation-timing-functionの他に下記のアニメーションプロパティも設定しています。

div{
	animation-name: myAnimation;
	animation-duration: 5s;
}
@keyframes myAnimation{
	0% {width: 0%; background-color: red;}
	100% {width: 95%; background-color: blue;}
}

初期値: ease

初期値はeaseです。遷移タイミング関数のcubic-bezier(0.25, 0.1, 0.25, 1.0)を指定した場合も同じ動きになります。 このキーワードと関数は既定値です。 アニメーションの最初と終わりは滑らかな動きになります。

ease
cubic-bezier(0.25, 0.1, 0.25, 1.0)

div{animation-timing-function: ease;}

目次に戻る

キーワード値: linear

このキーワードは一定の速度でアニメーションが進行します。 遷移タイミング関数のcubic-bezier(0.0, 0.0, 1.0, 1.0)と同じ動きになります。

ease
linear
cubic-bezier(0.0, 0.0, 1.0, 1.0)

div{animation-timing-function: linear;}

目次に戻る

キーワード値: ease-in

このキーワードは始めはゆっくりアニメーションし終わりになるにつれて加速します。 遷移タイミング関数のcubic-bezier(0.42, 0, 1.0, 1.0)と同じ動きになります。

ease
ease-in
cubic-bezier(0.42, 0, 1.0, 1.0)

div{animation-timing-function: ease-in;}

目次に戻る

キーワード値: ease-out

このキーワードは始まりの速度は速く徐々に減速しながらアニメーションします。 遷移タイミング関数のcubic-bezier(0, 0, 0.58, 1.0)と同じ動きになります。

ease
ease-out
cubic-bezier(0, 0, 0.58, 1.0)

div{animation-timing-function: ease-out;}

目次に戻る

キーワード値: ease-in-out

このキーワードは最初と最後はゆっくりアニメーションし、中盤は加速します。 遷移タイミング関数のcubic-bezier(0.42, 0, 0.58, 1.0)と同じ動きになります。

ease
ease-in-out
cubic-bezier(0.42, 0, 0.58, 1.0)

div{animation-timing-function: ease-in-out;}

目次に戻る

キーワード値: step-start

アニメーション開始時から終了の状態になります。 ステップ関数のsteps(1, jump-start)と同じ動きになります。

ease
step-start
steps(1, jump-start)

div{animation-timing-function: step-start;}

目次に戻る

キーワード値: step-end

アニメーションが終了するまでの時間はアニメーションはされずアニメーションの最後に終了の状態になります。 ステップ関数のsteps(1, jump-end)と同じ動きになります。

ease
step-end
steps(1, jump-end)

div{animation-timing-function: step-end;}

目次に戻る

関数値: steps()クラスのタイミング関数

このsteps()関数記法は、ステップ関数または段階関数と言われコマ送りのようにステップさせることができます。 ステップ数を指定することで等間隔に区切ることができます。

ここからはサンプルの仕様を変更しますが基本的な動作は以前のセクションと変わりません。

steps(n, jump-start)

引数にjump-startを指定すると 分割された各アニメーションステップの最初の位置のアニメーションを表示します。 ただし、最初のステップは飛ばします。

考え方として、このサンプルで説明するならば、 アニメーションが5つのステップに分割されるということは、 20%, 40%, 60%, 80%, 100%の段階に分割されると考えてください。 引数にjump-startを指定した場合は最初のステップは含まないので、結果としてこの中の20%, 40%, 60%, 80%, 100%の停止点のアニメーションが表示されるということになります。

なお、jump-startをstartに置き換えても同等の効果があります。

0% (from)
100% (to)
jump-start
linear

div{animation-timing-function: steps(5, jump-start);}

steps(n, jump-end)

引数にjump-endを指定すると 分割された各アニメーションステップの終了の位置のアニメーションを表示します。 ただし、最後のステップは飛ばします。

考え方として、このサンプルで説明するならば、 アニメーションが5つのステップに分割されるということは、 20%, 40%, 60%, 80%, 100%のの段階に分割されると考えてください。 引数にjump-endを指定した場合は最後のステップは含まないので、結果としてこの中の0%, 20%, 40%, 60%, 80%の停止点のアニメーションが表示されるということになります。

なお、jump-endをendに置き換えても同等の効果があります。

jump-end
linear

div{animation-timing-function: steps(5, jump-end);}

steps(n, jump-both)

jump-bothはjump-startとjump-endの両方の特性を併せ持っています。 最初のステップと最後のステップを含まずに、それ以外のところで効果的にステップします。

このサンプルでいうとアニメーションの停止点は、おおよそ 16.66%, 33.33%, 50%, 66.66%, 83.33%となります。

jump-both
linear

div{animation-timing-function: steps(5, jump-both);}

steps(n, jump-none)

jump-noneは、0%から100%の位置まで均一にステップが行われます。

このサンプルでいうとアニメーションの停止点は0%, 25%, 50%, 75%, 100%となります。

jump-none
linear

div{animation-timing-function: steps(5, jump-none);}

目次に戻る

関数値: cubic-bezier() クラスのタイミング関数

このタイミング関数は3次ベジェ曲線を定義します。 不正なcubic-bezier曲線を指定すると、そのプロパティは無視されます。

この関数に関しては私では説明できませんが、以下の文献がおおよその理解に役立ちましたのでリンクを貼っておきます。

なお、この関数はCSSのtransitionプロパティでも使用することができます。

div

div{animation-timing-function: cubic-bezier(0.68, -0.4, 0.32, 1.4);}

目次に戻る

グローバル値

animation-timing-functionプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値のeaseに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{animation-timing-function: グローバル値;}

目次に戻る

補足説明

  • すべての要素に適用可能
  • 親要素の値を継承しない

目次に戻る