背景色を変えるアニメーション

CSS3を使ってアニメーション的に背景色を変える方法を紹介します。

これまではJavascriptなどを使ってアニメーションをつけていましたが、CSS3でも簡単に行うことができます

See the Pen ezvRXO by 和禅雅 (@wazenmiyabi) on CodePen.

@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：無限ループ１：整数で回数指定（１回）初期値に戻る

HTML5 & CSS3の知識