<div class="container">
		<div class="headline">
			<div class="visuallyHidden">Text Animation09</div>

			<div class="text" aria-hidden="true">
				<span class="char" style="--char-index: 0">T</span>

				<span class="char" style="--char-index: 1">e</span>

				<span class="char" style="--char-index: 2">x</span>

				<span class="char" style="--char-index: 3">t</span>

				<span class="whitespace">&nbsp;</span>

				<span class="char" style="--char-index: 4">A</span>

				<span class="char" style="--char-index: 5">n</span>

				<span class="char" style="--char-index: 6">i</span>

				<span class="char" style="--char-index: 7">m</span>

				<span class="char" style="--char-index: 8">a</span>

				<span class="char" style="--char-index: 9">t</span>

				<span class="char" style="--char-index: 10">i</span>

				<span class="char" style="--char-index: 11">o</span>

				<span class="char" style="--char-index: 12">n</span>

				<span class="char" style="--char-index: 13">0</span>

				<span class="char" style="--char-index: 14">9</span>
			</div>
		</div>
	</div>

/* google fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

.text {
	color: #fff;
	overflow: hidden;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-family: 'Roboto Mono', monospace;
	font-size: 5vw;
	font-weight: 700;
	text-transform: uppercase;
	transform-origin: left;
	padding: 0 20px;
}

.text > .char {
	filter: blur(8px);
	opacity: 0;
}

.text.is-active > .char {
	animation: text09 1s cubic-bezier(0.77, 0, 0.175, 1);
	animation-fill-mode: forwards;
	animation-delay: calc(0.12s * var(--char-index));
}

@keyframes text09 {
	0% {
		filter: blur(8px);
		opacity: 0;
	}
	33.3% {
		filter: blur(2px);
		opacity: 1;
	}
	50% {
		filter: blur(0);
		opacity: 1;
	}
	100% {
		filter: blur(4px);
    opacity: 0;
	}
}

/* 初期CSS */
.container {
	overflow: hidden;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #3c3c3c;
}

.visuallyHidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

// クラスの付け外しのみ
const text = document.querySelector('.text');

text.classList.add('is-active');

setInterval(() => {
  text.classList.toggle('is-active');
}, 2800);