CSS

高度なアニメーションを設定しよう

animationプロパティとtransitionプロパティの違いを見ていきます。

  • animationとtransitionの違い
  • animationの設定方法

animationとtransitionの違い

・transition によるアニメーションですが変化前と変化後のスタイルを指定して、その中間を補完するということでアニメーションを実現する手法になります。

transitionでアニメーションさせてみよう

・ただ、これだと途中に別のスタイルを入れたくなったときや、アニメーションをずっと繰り返したいという場合に使うことができません。

・そこで、使えるのが animation プロパティで、変化前、変化後だけではなくてその途中に好きなタイミングでキーとなるフレームを挟んで、そのキーフレームごとにスタイルを設定して、アニメーションさせていくことができるようになります。

・それから transition と違って、設定したアニメーションを何度も繰り返したりすることもできます

animationの設定方法

・まずは @keyframes というキーワードでキーフレームの名前を指定してあげます。

・そのあとに、どの地点のフレームでどのようなスタイルにしたいか指定してあげればおkです。カンマなどは必要ありません

animationプロパティを設定してあげれば おkで、 animation-name でキーフレームの名前、そして animation-dutration でアニメーションの秒数を指定してあげます。

-広告-

 

 






-CSS