徐々に背景色を変更するCSSアニメーションサンプル

2021-07-03CSS アニメーション サンプル集,CSS

CSSのアニメーションを利用した徐々に要素の背景色を徐々に変化していくサンプルコードです。

2色バージョンと5色バージョンで紹介しています。

徐々に背景色を変更するCSSアニメーション（2色）

背景色を変更させるCSSアニメーションのサンプルコードの2色バージョンです。

See the Pen CSS gradually change background color animation 2 by yochans (@yochans) on CodePen.

<div class="container"></div>

animationプロパティには20秒（アニメーション時間）、linear（開始から完了まで一定のアニメーション速度）、infinite（アニメーションを繰り返す）を指定しています。

@keyframesではbackground-colorにて背景色を変更、2色目を50％に指定して0%と100％に同じ色を指定する事でシームレスな色の変更が可能になります。

.container {
	width: 100%;
	height: 250px;
	background-color: #ff4500;
	animation: change-color-anim 20s linear infinite;
}


@keyframes change-color-anim {
	0%,100%{
		background-color: #ff4500;
	}
	50%{
		background-color: #7fff00;
	}
}

徐々に背景色を変更するアニメーション（5色）

背景色を変更させるCSSアニメーションのサンプルコードの5色バージョンです。

See the Pen CSS gradually fade in animation by yochans (@yochans) on CodePen.

<div class="container"></div>

animationプロパティは上記のものと同じく20秒（アニメーション時間）、linear（開始から完了まで一定のアニメーション速度）、infinite（アニメーションを繰り返す）を指定しています。

@keyframesではbackground-colorにて背景色を変更、各色20％置きに指定して、0%と100％に同じ色を指定する事でシームレスな色の変更にしています。

.container {
	width: 100%;
	height: 250px;
	background-color: #ff4500;
	animation: change-color-anim 50s linear infinite;
}


@keyframes change-color-anim {
	0%,100%{
		background-color: #ff4500;
	}
	20%{
		background-color: #7fff00;
	}
	40%{
		background-color: #0091EA;
 }
	60%{
		background-color: #9400d3;
	}
	80%{
		background-color: #ff69b4;
	}
}