CSS

transition-timing-functionを使ってみよう2

実際にtransition-timing-functionを使って要素を動かして挙動を確かめてみます

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

transition-timing-function: ease-in-out

・ease-in-outはゆっくり動き出しゆっくり止まる仕様になっています

・これは大きな UI 部品によく使われます。

・実際に大きなものは動き出すのに時間がかかるので、ドロワーなどの大きな UI 部品を動かすときに使ってあげるといいでしょう。

transition-timing-function: linear

・ロボットのような動きで等速で回転してくれます。等速で回転していて欲しい、ローディングアイコンなどによく使われます。

・特にローディングアイコンでこの指定をしないとかなり違和感があるので積極的に指定していきましょう。

-広告-

 

 






-CSS