HTML разметка
<div class="wave">
<span style="--i:1">W</span>
<span style="--i:2">e</span>
<span style="--i:3">b</span>
<span style="--i:4">T</span>
<span style="--i:5">a</span>
<span style="--i:6">v</span>
<span style="--i:7">e</span>
<span style="--i:8">r</span>
<span style="--i:9">n</span>
<span style="--i:10">a</span>
</div>{}
CSS стили
.wave {
position: relative;
-webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, .2));
}
.wave span {
position: relative;
display: inline-block;
color: #fff;
font-size: 6em;
animation: animate 2s ease-in-out infinite;
animation-delay: calc(.1s*var(--i));
}
@keyframes animate {
0% {
transform: translateY(0px);
}
20% {
transform: translateY(-20px);
}
40%,
100% {
transform: translateY(0px);
}
}{}