CSS

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

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

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

transition-timing-function: ease

・まずeaseという値についての挙動を見ていきます。

・前回やったようにゆっくり速度が上がってゆっくり速度が落ちていくような自然な動きをしてくれます。

・自然に動いてくれるので特に特殊な場合でなければ多くは初期値であるeaseのまま使います。

transition-timing-function: ease-out

・次にease-out ですが、小さい UI 部品によく使われます。

・最初弾かれるように速くしたい場合に使います。ちょっとしたアラートなどに使ってあげると良いでしょう。

-広告-

 

 






-CSS