《CSS》「アニメーション」について

こんにちは、「なゆた」です！
今回は皆さんに、「CSS」での「アニメーション」についてをお教えします！
ボタンに、「動き」を付け加えていきますよ♪

①まずはHTMLファイルを用意します。divタグ内のクラス名は変えてもいいですし、文字はあってもなくても構いません。さぁ、次はCSSファイルと連携です！

②CSSファイルに移ったらまず、divタグ内のクラスに手を加えます。中でも肝心なのは、新しく教える「transition」タグです！これが無いと、ボタンに動きが付け加えられませんよ！「ease」にすると、なめらかに動きます。

③そして、カーソルを合わせた時の反応を表すhoverを付けたら・・・

ご覧のとおりに動きました！動画では無理でしたが、カーソルを合わせるとニュイ〜ンと動きました！

④さらに、hoverの中に背景色を付けると・・・

カーソルを合わせたら動くと同時に、色も変わります！！

ただし、easeを「linear」に変えると、なめらかさは無くなります。なので僕は、easeにすることをオススメします（笑）。

いかがでしたか？今のWebサイトは、ボタンに動きを付けるのが普及しているので、皆さんもこれを覚えていて下さいね！
以上です、ありがとうございました！