徐々にぼやかす、くっきりさせるCSSアニメーションサンプル

2021-06-052021-06-06CSS アニメーション サンプル集,CSS

CSSのアニメーションを利用して画像やテキストなどの要素を徐々にぼやかす、くっきりさせるサンプルコードです。

徐々にぼやかすCSSアニメーション

徐々にぼやかすCSSアニメーションのサンプルです。

See the Pen CSS | image pixelization by yochans (@yochans) on CodePen.

HTMLは親コンテナ要素に画像を入れただけのシンプルなものです。
サンプルで使っている画像ファイルは、そのまま直リンクでテスト用に使って頂いて問題ありません。

<div class="container">
	<img class="image" src="https://1-notes.com/wp-content/uploads/2021/02/cat2.jpg" />
</div>

画像や要素をぼやかすのに、filterにblurを指定しています。

ぼやかし度は最大100pxと大きな数値を指定していますが、10や20pxくらいでも十分にぼやけています。

animationには10秒（アニメーション時間）、linear（開始から完了まで一定）、forwards（完了した状態で止める）を指定しています。

.container{
	width: 500px;
	max-width: 100%;
}

.image{
	width: 100%;
	animation: blur-anim 10s linear forwards;
}

@keyframes blur-anim {
	100% { filter: blur(100px); }
}

blurで要素ぼやかした場合、ぼやかした分、要素は元のサイズより大きく表示されます。
画像や要素が親要素からはみ出るのを避ける場合は親要素にoverflow: hidden;を指定して下さい。

overflow: hidden;

徐々にくっきりさせるCSSアニメーション

最初にぼやかしておいて、徐々に画像や要素をくっきり、はっきりさせていくCSSアニメーションのサンプルです。

See the Pen CSS | gradually blur animation 2 by yochans (@yochans) on CodePen.

HTMLは、徐々にぼやかすサンプルと同じです。
サンプルで使っている画像ファイルは、そのまま直リンクでテスト用に使って頂いて問題ありません。

<div class="container">
	<img class="image" src="https://1-notes.com/wp-content/uploads/2021/02/cat2.jpg" />
</div>

徐々にぼやかした場合とは逆に、初期状態にfilterでblurを指定してぼやかしています。

CSSアニメーションで、指定した時間をかけて徐々にくっきりさせていきます。

animationには10秒（アニメーション時間）、linear（開始から完了まで一定）、forwards（完了した状態で止める）を指定しています。

.container{
	width: 500px;
	max-width: 100%;
}

.image{
	width: 100%;
	filter: blur(100px);
	animation: blur-anim2 10s linear forwards;
}

@keyframes blur-anim2 {
	100% {	filter: blur(0); }
}