animation-timing-function プロパティ

プロパティ animation-timing-function は、アニメーションの変化速度（イージング）を設定します。例えば、最初は遅く、次に速く、そして再び遅く、などです。

構文

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

値	説明
`ease`	最初は遅く、次に速く、最後は再び遅くなります。
`ease-in`	遅く始まり、徐々に加速します。
`ease-out`	速く始まり、徐々に減速して停止します。
`ease-in-out`	最初は遅く、次に速く、最後は再び遅くなります。 ease とは速度が異なります。
`linear`	常に一定の速度です。
`step-start`	アニメーションはなく、プロパティは即座に最終値を取ります。
`step-end`	アニメーションはなく、プロパティは `animation-duration` で設定された時間を待ち、その後瞬時に最終値を取ります。
`steps`	プロパティの値は段階的に変化します。
`cubic-bezier`	任意のアニメーションを定義できるベジェ曲線。ベジェ曲線ジェネレータを参照。

デフォルト値: ease。

下記の各ブロックにマウスを乗せると、全てのタイミング関数の動作を確認できます: