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アニメーション 一覧
CSSアニメーション
固有名詞/専門用語 日英辞書
化学、会計、観光、アニメ、漫画などの分野の用語を収録。
Niugnepについて
Niugnepは翻訳会社のオフィスペンギンが運営する、わかりやすい解説をモットーにした教養メディアです。Niugnepというサイト名は、Penguinが逆立ちしていることに由来します。