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

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

animationとtransitionの違い

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

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

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

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

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

animationの設定方法

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

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

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

-広告-

Anker PowerExpand Direct 7-in-2 USB-C PD メディア ハブ 4K対応 HDMIポート 100W出力 Power Delivery 対応 Thunderbolt 3 USB-Cポート USB-A ポート microSD & SDカード スロット搭載 価格：5999円（税込、送料無料) (2020/10/2時点) 楽天で購入

PD 充電器 RAVPower Type C 急速充電器 90W【GaN (窒化ガリウム)採用/2ポート/折畳式/PD対応/PSE認証済】iPhone 11/11 Pro/11 Pro Ma 価格：7329円（税込、送料無料) (2020/10/2時点) 楽天で購入