CSS3のトランジションとアニメーションは、「タイミング関数」と正式に呼ばれるイージングをサポートします。一般的なものはease-in、ease-out、ease-in-out、ease、およびlinearです。または、cubic-bezier()を使用して独自のものを指定できます。
ease-inは、アニメーションをゆっくり開始し、フルスピードで終了します。ease-outはアニメーションを全速で開始し、その後ゆっくり終了します。ease-in-outはゆっくり開始し、アニメーションの途中で最速になり、その後ゆっくり終了します。easeは、ease-in-outと似ていますが、終了するよりもわずかに速く開始する点が異なります。linearはイージングを使用しません。- 最後に、 これは素晴らしい説明です
cubic-bezier構文ですが、非常に正確な効果が必要な場合を除き、通常は必要ありません。
基本的に、イージングアウトはゆっくりと停止することであり、イージングインはゆっくりと加速することであり、リニアはどちらもしないことです。より詳細なリソースは MDNのtiming-functionのドキュメント で見つけることができます。
また、前述の正確な効果が必要な場合は、素晴らしいLea Verouの cubic-bezier.com があります。また、さまざまなタイミング機能をグラフィカルに比較するのにも役立ちます。
別の steps()タイミング関数 は、linearのように機能しますが、遷移の開始と終了の間で有限数のステップのみを実行します。 steps()は、トランジションではなくCSS3アニメーションで最も役に立ちました。良い例は、インディケーターにドットをロードすることです。伝統的に、一連の静止画像（たとえば、8つのドット、各フレームで2つの色の変化）を使用して、動きの錯覚を作り出します。 steps(8)アニメーションとrotate変換を使用すると、モーションを使用して別々のフレームの錯覚を作り出します！なんて面白い。