並行銀河七丁目

CSS ANIMATION

2005/06/22

この記事では CSS のアニメーションについて触れています。

※このページはレスポンシブ対応していません。スマホだとコードがおかしな表示になります、ご了承ください。

はじめに

本来アニメーションしない background-image と linear-gradient のアニメーションについて触れていますが、かなり強引な手法を取っています。

この件について調べると ::after 疑似要素を使って空要素を定義して z-index 等を設定して……とかなり込み入ったコーディングで実装されている方が多く、実装しても動いたと思えば要求と違う動作だったりしました。またそれは現状の CSS のコードでの対応としては正しいことではあるとは思いますが、もっと原始的な方法でいいのではと思いここに記載しておきます。

結論

バカバカしいまでに正直なコード。

[HTML]


<div class="background_gradation_animation">
	background-image の linear-gradient アニメーション
</div>

[CSS]


.background_gradation_animation {
	color: #ffffff;
	animation: gradientX 1s linear infinite;
}

@keyframes gradientX {
	0% {
		background-image: linear-gradient(90deg, #006699, #ffffff 0%);
	}
	10% {
		background-image: linear-gradient(90deg, #006699, #ffffff 10%);
	}
	20% {
		background-image: linear-gradient(90deg, #006699, #ffffff 20%);
	}
	30% {
		background-image: linear-gradient(90deg, #006699, #ffffff 30%);
	}
	40% {
		background-image: linear-gradient(90deg, #006699, #ffffff 40%);
	}
	50% {
		background-image: linear-gradient(90deg, #006699, #ffffff 50%);
	}
	60% {
		background-image: linear-gradient(90deg, #006699, #ffffff 60%);
	}
	70% {
		background-image: linear-gradient(90deg, #006699, #ffffff 70%);
	}
	80% {
		background-image: linear-gradient(90deg, #006699, #ffffff 80%);
	}
	90% {
		background-image: linear-gradient(90deg, #006699, #ffffff 90%);
	}
	100% {
		background-image: linear-gradient(90deg, #006699, #ffffff);
	}
}

[RESULT]

background-image の linear-gradient アニメーション

ここでは分かりやすくするために animation で infinite してますが普通に forwards で終わらせることが多いと思います。また、1 秒で実行してますが、0.5 秒の方がより滑らかです。

解説

いります？ (汗)
要はパラパラ漫画ですね。だってアニメーションの基本はパラパラ漫画ですし、コンピュータのアニメーション処理だって結局内部で地道にパラパラ漫画やってるだけですもの。
難しいこと考えずにやってもいいんじゃないかと思い今回はこのコードになりました。

実はこれに似たコードで 0% 時に width: 0% にして 100% の時に width: 100% にする、0% と 100% の指定しかない方法もあるのですが、これをやると 0% 時に要素が縦長にはみ出るので一見すると背景だけは自然にアニメーションしてるようでいてやはり実装できませんでした。

おわりに

難しいことを考えずに単純化して原始的な方法を取るのもときにはありかなと思いこのような方法をとってみました。
コーディングの仕方は人それぞれなのでこれもひとつの解として受け入れていただけるとありがたいです。

戻る