CSS

再生順を制御してみよう

アニメーションの再生順と緩急のつけ方について見ていきます。

  • 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％のところだけ等速になります。

-広告-

 

 






-CSS