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