閉じる
カテゴリー

CSSアニメーション例
animation-timing-functionの比較

CSSアニメーションは、animation-timing-functionプロパティでアニメーションの進行速度(変化の度合い)を指定できます。

ここでは、値に取れるlinear, ease, ease-in, ease-out, ease-in-outの違いをわかりやすく比較します。

なお、デフォルト値はeaseです。

左から右にバーが伸びる

linear
ease
ease-in
ease-out
ease-in-out
widthプロパティで制御。アニメーション進行100%の時点でwidth: 100%;に設定。

左から右に移動するボックス

linear
ease
ease-in
ease-out
ease-in-out
leftプロパティで制御。あらかじめ動かく要素にposition: relative;を設定。

四角が丸くなる

linear
ease
ease-in
ease-out
ease-in-out
border-radiusプロパティで制御。正方形に対してborder-radius: 50%;を指定すると丸くなる。

白から黒に変わる

linear
ease
ease-in
ease-out
ease-in-out

animation-timing-functionの値の違い

参考までに、linear, ease, ease-in, ease-out, ease-in-outの感覚的な違いを言葉で表すと次のような感じです。

  • linear:一定した変化
  • ease:滑らかに始まり、滑らかに終わる
  • ease-in:かなりゆっくり始まる
  • ease-out:かなりゆっくり終わる
  • ease-in-out:ゆっくり始まり、ゆっくり終わる

CSSアニメーション 一覧