{ transition-timing-function 【 トランジション・タイミング・ファンクション 】 : 進行度; }

transition-timing-functionプロパティは、transition-durationプロパティで指定した時間におけるトランジションの進行度（速度とタイミング）を指定します。

初期値	ease
継承	なし
適用される要素	すべての要素、:before、:after疑似要素
モジュール	CSS Transitions

値の指定方法

進行度

ease	変化の開始付近と終了付近の動きを滑らかにします。cubic-bezier(0.25, 0.1,0.25, 1)に当たります。
linear	一定の割合で直線的に変化します。cubic-bezier(0, 0, 1, 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)に当たります。
cubic-bezier()	関数型の値です。トランジションの変化が進行する時間をX軸、変化の度合いをY軸とした三次ベジェ曲線の軌跡によって、トランジションの進行度を指定します。以下の図のように、2つの制御点であるP1の座標（X1,Y1）とP2の座標（X2,Y2）をカンマ（,）で区切って、cubic-bezier(X1,Y1,X2,Y2)のように指定します。値は0〜1の実数です。
step-start	変化の開始時点で終了状態に変化します。steps(1, start)に当たります。
step-end	開始時に変化せず、終了時に変化が完了した状態になります。steps(1, end)に当たります。
steps()	関数型の値です。トランジションの変化が進行する時間と度合いを、指定したステップ数で等分に区切ります。ステップ数は正の整数で指定します。併せて、カンマ（,）で区切って、変化のタイミングを各ステップの起点にしたい場合はstart、終点にしたい場合はendを指定します。例えば、以下の図のようにトランジションの変化を3 段階で各ステップの終了時に発生させるには、steps(3,end)と指定します。

サンプルコード

.box{
  border: 1px solid red;
  background-color: aqua;
}
.box:hover{
  transition-property: background-color;
  transition-duration: 6s;
  transition-timing-function: steps(3,end);
  background-color: yellow;
}