CSSイージングのお手本 - ease-out, ease-in, linearの使い分け - ICS MEDIA

イージングとは「動きの加減速」を示す用語で、アニメーションにおいては動きの「性格」を表すものです。適切なイージングを設定することで、ユーザーへ与える印象がかわります。ユーザー体験をデザインするうえでイージングは欠かせない要素です。しかし、イージングは多くの種類があり、それぞれを把握し的確に使い分けるのは少し難易度が高いかもしれません。本記事はイージングの選定に役立つ、お手本的な使い分け方を紹介します。 この記事の要約 イーズインは徐々に加速、イーズアウトは徐々に減速。 「イーズアウト」は多くの場面で「変化の余韻が残りやすい印象」でオススメ。 リニア（linear）は透明度の変化に使うとよい。 CSSのデフォルトのイージングは性格が弱いので、cubic-bezier()を使うのがよい。 イージングの性格 冒頭でも触れましたが、イージングは「最初はゆっくりで、徐々に早く変化させる」といった動き

[bleu-bleut]

イージングの性格（linear,easeIn,easeOut,easeInOut）と性格の強さ（Sine・Quad・Cubic・Quart・Quint・Expo）、イージングとcubic-bezierの変換。

[tonkotsuboy_com]

"イージングとは「動きの加減速」を示す用語で、アニメーションにおいては動きの「性格」を表す"