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

.text.is-active {
	animation: text08 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes text08 {
	0% {
		opacity: 0;
		transform: scale(0.3) translateY(150%);
	}
	30% {
		opacity: 1;
	}
	75% {
		transform: scale(1.5) translateY(-30%);
	}
	100% {
		transform: scale(1) translateY(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);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.