<div class="container">
	<div class="text">
		<div class="word">Text Animation08</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;
	font-family: 'Roboto Mono', monospace;
	font-size: 5vw;
	font-weight: 700;
	text-transform: uppercase;
	transform-origin: left;
}

.text.is-active {
	animation: text08 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes text08 {
	0% {
		opacity: 0;
		transform: translateX(20vw) scaleX(1) scaleY(1) skew(-60deg);
	}
	10% {
		opacity: 1;
	}
	80% {
		transform: scaleX(0.3) scaleY(1.2);
	}
	100% {
		transform: scaleX(1) scaleY(1);
	}
}

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