CSS

transition-timing-functionの概要

アニメーションの速度に緩急をつけることができるプロパティについて見ていきます。

  • transition-timing-function: ease
  • transition-timing-function: ease-out
  • transition-timing-function: ease-in-out
  • transition-timing-function: linear

transition-timing-function: ease

・アニメーションの速度に緩急をつけるための transition-timing-function プロパティについて見ていきます。

・まず ease でこれはデフォルトの値です。

・ゆっくり速度が上がって、ゆっくり速度が落ちるという動きですね

transition-timing-function: ease-out

・ease-outは動作の最初が早く後半になるにつれゆっくり動くようになる仕様になっています。

transition-timing-function: ease-in-out

・ease-in-outは最初ゆっくり動いて最後もゆっくり動くような仕様になっています。

・ease よりも最初がゆっくりと動きます。

transition-timing-function: linear

・linear ですが、これは最初から最後まで同じ速度で動く指定になります。

・なおほとんどのケースでは規定値の ease で十分ですし、これらの違いは慣れないと見分けられないくらい微妙なので、それほどこだわりがなければあまり使うことはないかも知れません。

-広告-

 

 






-CSS