アニメーションの再生順と緩急のつけ方について見ていきます。
- aniamtion-direction
- animation-timing-function
aniamtion-direction
・今までは左から右へと繰り返されるアニメーションを学んで来ました。今回は折り返して逆側にアニメーションしたり単に逆再生するようにしてみます。
・まずは折り返す方法ですが.animationに対してanimation-direction というプロパティを使ってあげます。値は alternate にします。
・単に逆再生することもでき、animation-sirectionの値をreverse としてあげてください。
・左までいったら折り返してくれるような動きをさせたいなら、 reverse ではなくて、 alternate-reverse としてあげてください。
animation-timing-function
・animation に関しても timing-function を設定することができます。
・animation-timing-function: linear; としてあげると、全てのキーフレーム間のアニメーションがこちらの設定になります。
・もしくは、全体ではなくてフレームごとに設定することもできます。例えば0% の設定のところで同じ設定を書いてあげると0%から50%のところだけ等速になります。
-広告-
|
|