<div class="container">
	<div class="text">
		<div class="word">Text Animation07</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;
}

.text.is-active {
	--skewX: 0deg;
	--cover-x: 101%;
	--x: 0;
}

.text::before,
.text::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 50vh;
	transform: translateX(var(--cover-x, -101%));
	transition: transform 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.text::before {
	background-color: #fff;
}

.text::after {
	background-color: #bce9ec;
	transition-delay: 0.16s;
}

.word {
	color: #fff;
	font-family: 'Roboto Mono', monospace;
	font-size: 5vw;
	font-weight: 700;
	text-transform: uppercase;
	transform: translateX(var(--x, -110%)) skewX(var(--skewX, 8deg));
	transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: 0.3s;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.