CSS3トランジションのイーズインとイーズアウトの違い

CSS3トランジションの違いは何だease-in、ease-outなどは、？

CSS3のトランジションとアニメーションは、正式には「タイミング関数」と呼ばれるイージングをサポートしています。一般的なものがありますease-in、ease-out、ease-in-out、ease、およびlinear、またはあなたが使用して独自のものを指定することができますcubic-bezier()。

• ease-in アニメーションをゆっくりと開始し、フルスピードで終了します。
• ease-out アニメーションをフルスピードで開始し、ゆっくりと終了します。
• ease-in-out ゆっくりと開始し、アニメーションの中央で最も速く、その後ゆっくりと終了します。
• easeease-in-out終了するよりも少し早く開始することを除いて、に似ています。
• linear イージングを使用しません。
• 最後に、ここにcubic-bezier構文のすばらしい説明がありますが、非常に正確な効果が必要でない限り、通常は必要ありません。

基本的に、イージングアウトは減速して停止すること、イージングインはゆっくり加速すること、線形はどちらもしないことです。MDNのドキュメントで詳細なリソースを見つけることができますtiming-function。

そして、前述の正確な効果が必要な場合は、驚くべきLea Verouのcubic-bezier.comが利用できます。また、さまざまなタイミング関数をグラフィカルに比較するのにも役立ちます。

別のsteps()タイミング関数はのように動作しlinearますが、トランジションの開始と終了の間で有限数のステップのみを実行します。steps()トランジションではなく、CSS3アニメーションで最も役立ちました。良い例は、ドット付きのインジケーターの読み込みです。従来、一連の静止画像（たとえば、8つのドット、各フレームで2つの色が変化する）を使用して、モーションの錯覚を生み出しています。steps(8)アニメーションとrotate変換は、別のフレームの錯覚を生成するために運動を使用しています！なんて面白い。