<div>Dept. of <span aria-label="Enthusiasm" data-splitting>Enthusiasm</span></div>
body {
background: #000000;
color: #fff;
text-transform: uppercase;
text-align: center;
font: 600 5vw/1.5 system-ui, sans-serif;
display: grid;
place-items: center;
height: 100vh;
margin: 0;
}
.splitting .char {
animation: slide-in 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
animation-delay: calc(60ms * var(--char-index));
}
@keyframes slide-in {
0% {
transform: translateY(-1em) rotate(-0.5turn) scale(0.5);
}
20%,
100% {
transform: translateY(0) rotate(0deg) scale(1);
}
}
Splitting();