ビジュアル

CSSだけで作る、文字の中の背景がズームして画面全体に広がるアニメーション

投稿日 2026/02/24

更新日 2026/2/16

最初は「文字の中だけ」に見えていた背景。そこから一気にズームして、画面全体へ広がっていく。
このサンプルは、テキストをマスクとして背景画像を表示し、文字を巨大化させることで文字の中の世界が広がるように見せる演出です。JavaScriptなしで実装できます。

ページを開いたタイミングでアニメーションが始まります。プレビュー画面では、一度更新して動きをご確認ください。

Preview プレビュー

Code コード

HTML

<div class="kumonosu-container">
	<div class="kumonosu-mask">KUMONOSU</div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
/* カスタムプロパティの設定 */
@property --kumonosu-o {
	syntax: "<number>";
	initial-value: 1;
	inherits: true;
}
:root {
	--kumonosu-bg-image: url('https://picsum.photos/id/10/1920/1080');
}
/* bodyは余白を消すのみ */
body {
	margin: 0;
	padding: 0;
	background-color: #000;
}
/* 全体を囲うコンテナにレイアウトを集約 */
.kumonosu-container {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	/* 背景に画像を設定し、上に黒い膜を重ねる */
	background:
		conic-gradient(rgb(0 0 0 / var(--kumonosu-o)) 0 0),
		var(--kumonosu-bg-image) 50% / cover no-repeat;
	animation: kumonosu-fade 3s forwards ease-out 1s;
}
/* 背景フェード用アニメーション */
@keyframes kumonosu-fade {
	to {
		--kumonosu-o: 0;
	}
}
/* テキストマスク部分 */
.kumonosu-mask {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	place-content: center;
	/* テキスト: KUMONOSU */
	font: bold 4.5vmax Montserrat, sans-serif;
	background: var(--kumonosu-bg-image) 50% / cover no-repeat;
	/* 背景をテキストの形に切り抜く */
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	scale: 2;
	animation: kumonosu-reveal 3s forwards ease-out 1s;
}
/* テキストが広がるアニメーション */
@keyframes kumonosu-reveal {
	to {
		scale: 1;
		/* 文字を極限まで大きくして、中身の背景を画面いっぱいに広げる */
		font-size: 350vmax;
	}
}