<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.