実際に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 部品によく使われます。

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

-広告-

Anker PowerExpand Direct 7-in-2 USB-C PD メディア ハブ 4K対応 HDMIポート 100W出力 Power Delivery 対応 Thunderbolt 3 USB-Cポート USB-A ポート microSD & SDカード スロット搭載 価格：5999円（税込、送料無料) (2020/10/2時点) 楽天で購入

PD 充電器 RAVPower Type C 急速充電器 90W【GaN (窒化ガリウム)採用/2ポート/折畳式/PD対応/PSE認証済】iPhone 11/11 Pro/11 Pro Ma 価格：7329円（税込、送料無料) (2020/10/2時点) 楽天で購入