<div class="jump-texts">
<span style="--i:1">正</span>
<span style="--i:2">在</span>
<span style="--i:3">加</span>
<span style="--i:4">载</span>
<span style="--i:5">中</span>
<span style="--i:6">.</span>
<span style="--i:7">.</span>
<span style="--i:8">.</span>
</div>
@keyframes jump {
0%,100% {
transform: translateY(0px);
}
40% {
transform: translateY(-24px);
}
}
.jump-texts {
font-size: 36px;
font-weight: bold;
}
.jump-texts span {
display: inline-block;
animation: jump 1.5s ease-in-out infinite;
animation-delay: calc(.1s*var(--i));
}