背景色を変えるアニメーション
CSS3を使ってアニメーション的に背景色を変える方法を紹介します。
これまではJavascriptなどを使ってアニメーションをつけていましたが、CSS3でも簡単に行うことができます
See the Pen ezvRXO by 和禅雅 (@wazenmiyabi) on CodePen.
@keyframeにアニメーションを格納し名前を付ける
@keyframe nameの中で0%から100%までの動きをそれぞれ指定します
ここでは０％のbackground-color:#FFFFFFから
100%のbackground-color:#000000まで1秒間(1s)掛けて移動するように指定しています
nameはそのアニメーション(@keyframe)の名前(任意)この名前を指定することでそれぞれの@keyframeを呼び出す事ができるようになる
| Code | 説明 |
|---|---|
| animation:bg-color 1s forwards; | 定義した変数（bg-color）を呼び出す（名前は任意） |
| animation:bg-color 1s forwards; | １秒（1/100単位で指定可能） |
| animation:bg-color 1s forwards; | forwards：100%まで来た状態を保持 infinite：無限ループ １：整数で回数指定（１回）初期値に戻る |
この記事へのコメント