アニメーションするまでの時間、前後の状態、回数について見ていきます。
- 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 にしてあげると無限に繰り返すという意味になります。
-広告-
|
|