Wave Text Animation

<h2 class="wave-txt">ANIMATED</h2>

body{background:#0d1426}
.wave-txt{margin:0;font:800 44px/1 system-ui,sans-serif;display:flex}
.wave-txt span{display:inline-block;background:linear-gradient(135deg,#ff7a18,#ff477e);-webkit-background-clip:text;background-clip:text;color:transparent;animation:wv 1.4s ease-in-out infinite}
@keyframes wv{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

var h=document.querySelector('.wave-txt'),t=h.textContent;h.textContent='';
t.split('').forEach(function(c,i){var s=document.createElement('span');s.textContent=c;s.style.animationDelay=(i*0.08)+'s';h.appendChild(s)});