transition-timing-functionとは
- ここで説明するtransition-timing-function とは次の語句からなるCSSのプロパティです。
- transition
- 読み: トランジション
意味: 変更、変化、変更、遷移(移り変わること) - timing
- 読み: タイミング
意味: 時間差、時機、瞬間 - function
- 読み: ファンクション
意味: 働き、作用、関数
transition-timing-functionプロパティの概要
このプロパティはトランジションによるプロパティ値の遷移中のタイミングを指定をします。
つまり、トランジションの開始から終わりの間に遷移をどのように進行させるのかを指定するプロパティです。 CSSには2種類のタイミング関数に対応しており、キーワードまたは関数で指定します。
構文
サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。
セレクター{transition-timing-function: 設定値;}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
このサンプルではdiv要素を使います。 トランジションの対象となるプロパティは、あらかじめ以下のように設定しています。
div:hoverのセレクタはマウスポインタをdiv要素に乗せた状態で適用されるCSSStyleですから、 要素にマウスオーバーすれば width と background-colorの設定値は遷移されます。
div{
transition-duration: 2s;
width: 40%;
background-color: khaki;
}
div:hover{
width: 80%;
background-color:green;
}
初期値: ease
初期値はeaseです。遷移タイミング関数のcubic-bezier(0.25, 0.1, 0.25, 1.0)を指定した場合も同じ動きになります。 このキーワードと関数は既定値です。 トランジションの最初と終わりは滑らかな動きになります。
div{transition-timing-function: ease;}キーワード値: linear
このキーワードは一定の速度でトランジションします。 遷移タイミング関数のcubic-bezier(0.0, 0.0, 1.0, 1.0)と同じ動きになります。
div{transition-timing-function: linear;}キーワード値: ease-in
このキーワードは始めはゆっくりトランジションし、終わりになるにつれて加速します。 遷移タイミング関数のcubic-bezier(0.42, 0, 1.0, 1.0)と同じ動きになります。
div{transition-timing-function: ease-in;}キーワード値: ease-out
このキーワードは始まりの速度は速く徐々に減速しながらトランジションします。 遷移タイミング関数のcubic-bezier(0, 0, 0.58, 1.0)と同じ動きになります。
div{transition-timing-function: ease-out;}キーワード値: ease-in-out
このキーワードは最初と最後はゆっくりトランジションして中盤は加速します。 遷移タイミング関数のcubic-bezier(0.42, 0, 0.58, 1.0)と同じ動きになります。
div{transition-timing-function: ease-in-out;}キーワード値: step-start
このキーワードはトランジションは開始時から終了の状態になります。 ステップ関数のsteps(1, jump-start)と同じ動きになります。
div{transition-timing-function: step-start;}キーワード値: step-end
このキーワードはトランジションが完了するまでの時間はトランジションはされず、トランジションの最後に完了の状態になります。 ステップ関数のsteps(1, jump-end)と同じ動きになります。
このサンプルでは transition-duration が2sで設定してあるので、2秒後にトランジションの完了へステップします。
div{transition-timing-function: step-end;}関数値: steps()クラスのタイミング関数
このsteps()関数記法は、ステップ関数または段階関数と言われコマ送りのようにステップさせることができます。 ステップ数を指定することで等間隔に区切ることができます。
steps(n, jump-start)
引数にjump-startを指定すると 左連続関数を示し、遷移が開始されたときに最初のジャンプが行われるようにします。
div{transition-timing-function: steps(5, jump-start);}steps(n, jump-end)
引数にjump-endを指定すると アニメーションが終了したときに最後のジャンプが行われるように、右連続関数を表します。
div{transition-timing-function: steps(5, jump-end);}steps(n, jump-both)
jump-bothはjump-startとjump-endの両方の特性を併せ持っています。 0%と100%の両方のマークで一時停止が含まれ、移行時間中にステップを効果的に行います。
このサンプルでいうとトランジションの停止点は、おおよそ0%, 16.66%, 33.33%, 50%, 66.66%, 83.33%, 100%となります。
div{transition-timing-function: steps(5, jump-both);}steps(n, jump-none)
jump-noneは、0%から100%の位置まで均一にステップが行われます。
このサンプルでいうとアニメーションの停止点は[ 0%, 25%, 50%, 75%, 100% ]となります。
div{transition-timing-function: steps(5, jump-none);}関数値: cubic-bezier() クラスのタイミング関数
このタイミング関数は3次ベジェ曲線を定義します。 不正なcubic-bezier曲線を指定すると、そのプロパティは無視されます。
この関数に関しては私では説明できませんが、以下の文献がおおよその理解に役立ちましたのでリンクを貼っておきます。
なお、この関数はCSSのanimationプロパティでも使用することができます。
(0.68, -0.4, 0.32, 1.4)
div{animation-timing-function: cubic-bezier(0.68, -0.4, 0.32, 1.4);}グローバル値
transition-timing-functionプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。
- inheritは親要素の値の継承を促します。
- initialは値を初期値のeaseに戻します。
-
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{transition-timing-function: グローバル値;}補足説明
- すべての要素に適用可能
- 親要素の値を継承しない