{ animation-timing-function 【 アニメーション・タイミング・ファンクション 】 : 進行度; }

animation-timing-functionプロパティは、アニメーションが変化する速度を指定します。

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

値の指定方法

進行度

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

サンプルコード

@keyframes bnr-animation{
  0% {width: 60px; background-color: #6cb371; }
  50% {width: 234px; height: 60px; background-color: #ffd700; }
  100% {width: 234px; height: 234px; background-color: #ff1493; }
}
.box {
  widith: 300px;
  border: 1px solid #ccc;
  animation-name: box-animation;
  animation-duration: 10s;
  animation-timing-function: ease-in;
}