<div class="utext">Анімація тексту з літерами, що зникають і з'являються</div>

<style>
  .utext {
  color: #29D4D2;
  font-size: 28px;
  line-height: 32px;  
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 30px 0;
  filter: drop-shadow(0 8px 5px rgba(71,34,48,0.6));
}
.utext span {
  animation: fading 3s alternate infinite;
  opacity: 0;
}
@keyframes utext {
  0% {
  opacity: 0;
  filter: blur(10px);
  }
  50%, 100% {
  opacity: 1;
  filter: blur(0px);
  }
}
  </style>

<script>
let fadingHeading = document.querySelectorAll('.utext');
for (let a = 0; a < fadingHeading.length; a++){
let letters = fadingHeading[a].textContent.split('');
let content = letters.map((val, i) => {
  let delay = Math.floor((Math.random() * 1000) + 1);
  return ('<span style="animation-delay: '+ delay + 'ms">'+ val +'</span>');
});
fadingHeading[a].innerHTML = "";
for (let i = 0; i < content.length; i++) {
  fadingHeading[a].innerHTML += content[i];
}
}  
</script>