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

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回)初期値に戻る

この記事が気に入ったら
いいね ! お願いします(><;)

投稿者:和禅雅

この記事へのコメント