CSS

アニメーションを細かく制御しよう

アニメーションするまでの時間、前後の状態、回数について見ていきます。

  • animation-delay
  • animation-fill-mode
  • animation-iteration-count

animation-delay

・animation-name ですが @keyframes の名前をつけてあげればいいです。いくつか細かいルールがあったりしますが、英数字、ハイフン、アンダーバーを使って、好きな名前をつけてあげることができます。

・animation-duration はアニメーションにかかる時間ですが今回だと3秒なので、 0 秒地点で 0% の状態、 50%で1.5秒の地点でこの状態、 100% 3秒の地点でこの状態という意味になります。

・animation-delay プロパティを使ってあげればアニメーションの開始時間を遅らせることもできます。値を1sとしてあげると1 秒経ってから、 3秒かけてアニメーションしています。

animation-fill-mode

・もし、終わった後は、そのままの状態で居て欲しい場合、 animation-fill-mode というプロパティを使うことができます。値は forwards としてあげてください。

animation-iteration-count

・それから、アニメーションを何回繰り返すかも指定することができます。animation-iteration-count というプロパティを使うのですが、 2 回繰り返したい場合は、こちらを 2 としてあげれば OK です。

・それから animation-iteration-count の値を infinite にしてあげると無限に繰り返すという意味になります。

-広告-

 

 






-CSS