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