<div class="container">
	<div class="headline">
		<div class="visuallyHidden">Text Animation05</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"> 5 </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 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: "Roboto Mono", monospace;
  font-size: 5vw;
  font-weight: 700;
  text-transform: uppercase;
}

.text.is-active {
  --opacity: 1;
  --scale: 1;
}

.char {
  display: inline-block;
  transform: scale(var(--scale, 0));
  opacity: var(--opacity, 0);
  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1), transform 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition-delay: calc(0.016s * var(--char-index));
}

/* 初期CSS */
.container {
  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');
}, 2600);