CSS

transitionの時間を制御しよう

transitionする時間の長さとtransitionの遅延について見ていきます。

  • transition-duration
  • transition-delay

transition-duration

・アニメーションが開始するまでの時間を調整したい場合について見ていきます。今回はマウスホバーしたら１秒後にアニメーションを開始し0.3秒かけて右に30px移動するような要素を作っていこうと思います。

・まずはtranslateXだけにしておき、今はtransition-popertyが1秒で設定されていつのでホバーした瞬間1秒かけて右にすっと動くアニメーションが設定されています。

transition-delay

・duration はアニメーションの時間でしたが、 transition-delay というプロパティも設定することができます。.animationの中でtransitioon-delayプロパティを使用していき値は1s;としていくと1秒ボバーしたらアニメーションが動き出します。

・duration のほうですが、このあたりは好きに決めればいいのですが、 UI では大体 0.3 秒くらいが小気味良い速度と言われています。

・動かしたいものにもよるのですが、 duration で迷ったら 0.3 秒を基準に調整してあげるといいかと思います。

 

 

-広告-

 

 






-CSS