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

    <div class="text" aria-hidden="true">
      <div class="text1">Text Animation06</div>

      <div class="text2">Text Animation06</div>

      <div class="text3">Text Animation06</div>
    </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 {
	overflow: hidden;
	position: relative;
	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 {
	--skewX: 0deg;
	--x: 0;
}

.text1,
.text2,
.text3 {
	transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.text2,
.text3 {
	position: absolute;
}

.text1 {
	mask-image: linear-gradient(
    to bottom, 
    #000 33.3%, 
    transparent 33.3%
  );
	transform: translateX(var(--x, -110%)) skewX(var(--skewX, 40deg));
}

.text2 {
	mask-image: linear-gradient(
		to bottom,
		transparent 33.3%,
		#000 33.3%,
		#000 66.6%,
		transparent 66.6%
	);
	transform: translateX(var(--x, 110%)) skewX(var(--skewX, -40deg));
}

.text3 {
	mask-image: linear-gradient(
    to bottom, 
    transparent 66.6%, 
    #000 66.6%
  );
	transform: translateX(var(--x, -110%)) skewX(var(--skewX, 40deg));
}

/* 初期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');
}, 3200);