こんな人に読んで欲しい！
・「キーフレーム」についてを知りたい人
こんにちは、「なゆた」です！
今回は皆さんに、「CSS」での、背景色を自動で変わるようにする方法をお教えします！
①まず、HTMLファイルを用意します。入れるのは以下のものだけでいいです。divタグ内のクラス名は何でも構いません。さぁ、それが出来たら、次はCSSファイルと連携です！！
②連携したCSSファイルに移ったらまず、mainタグの幅を決めます。その後、画像のクラスに手を加えます。animationタグには、動く時間を10秒（10s）、動き方を柔らかく動かせる「ease-in-out」にします。種類を「setAnimation」にし、条件を、無限に動き続ける「infinite-alternate」にします。
③次に忘れてはいけないのが、「キーフレーム」です。これがないと、背景色を自動で動かせませんよ！！setAnimationにキーフレームを付け、from・50%・75%・toの４つそれぞれに背景色を入れます。すると・・・
④ご覧ください、赤→緑→青→オレンジの順に、色がゆっくりと変わって行き、逆方向で赤へと戻って行きました！！これで完成です！！
いかがでしたか？まぁ・・・あんまり使うことはないかもしれませんが、とりあえずこの方法を身に付けておいて下さいね！
以上です、ありがとうございました！
コメント