You can use CSS (Cascading Style Sheets) in manifold ways to create animations for your text ranging from simple to elaborate!

Here are a couple of examples for your perusal.

The "Las Vegas"

STYX

<style>
 
.sign {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 50%;
  background-image: radial-gradient(
    ellipse 50% 35% at 50% 50%,
    #6b183955,
    transparent
  );
  transform: translate(-50%, -50%);
  letter-spacing: 2;
  left: 50%;
  top: 50%;
  font-family: “Josefin Slab” ;
  text-transform: uppercase;
  font-size: 8em;
  color: #cf24e2;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
    -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
    0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  animation: shine 4s forwards, flicker 6s infinite;
}
 
@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
  28%,
  33% {
    color: #ff65bd;
    text-shadow: none;
  }
  82%,
  97% {
    color: #ff2483;
    text-shadow: none;
  }
}
 
.flicker {
  animation: shine 4s forwards, blink 6s 4s infinite;
}
 
.fast-flicker {
  animation: shine 2s forwards, blink 10s 1s infinite;
}
 
@keyframes shine {
  0% {
    color: #6b1839;
    text-shadow: none;
  }
  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
}
 
@keyframes flicker {
  from {
    opacity: 1;
  }
 
  4% {
    opacity: 0.9;
  }
 
  6% {
    opacity: 0.85;
  }
 
  8% {
    opacity: 0.95;
  }
 
  10% {
    opacity: 0.9;
  }
 
  11% {
    opacity: 0.922;
  }
 
  12% {
    opacity: 0.9;
  }
 
  14% {
    opacity: 0.95;
  }
 
  16% {
    opacity: 0.98;
  }
 
  17% {
    opacity: 0.9;
  }
 
  19% {
    opacity: 0.93;
  }
 
  20% {
    opacity: 0.99;
  }
 
  24% {
    opacity: 1;
  }
 
  26% {
    opacity: 0.94;
  }
 
  28% {
    opacity: 0.98;
  }
 
  37% {
    opacity: 0.93;
  }
 
  38% {
    opacity: 0.5;
  }
 
  39% {
    opacity: 0.96;
  }
 
  42% {
    opacity: 1;
  }
 
  44% {
    opacity: 0.97;
  }
 
  46% {
    opacity: 0.94;
  }
 
  56% {
    opacity: 0.9;
  }
 
  58% {
    opacity: 0.9;
  }
 
  60% {
    opacity: 0.99;
  }
 
  68% {
    opacity: 1;
  }
 
  70% {
    opacity: 0.9;
  }
 
  72% {
    opacity: 0.95;
  }
 
  93% {
    opacity: 0.93;
  }
 
  95% {
    opacity: 0.95;
  }
 
  97% {
    opacity: 0.93;
  }
 
  to {
    opacity: 1;
  }
}
 
 
</style>
 
<h3 class="sign"><span class="fast-flicker">S</span>TY<span class="flicker">X</span></h3>

The "River"

STYX
<style>
 
 
.patterns {
  height: 12rem
}
 
 
svg text {
  font-family: ‘Josefin Slab’;
  letter-spacing: 10px;
  stroke: #cf24e2;
  font-size: 150px;
  font-weight: 700;
  stroke-width: 3;
 
  animation: textAnimate 5s infinite alternate;
  
}
 
@keyframes textAnimate {
  0% {
    stroke-dasharray: 0 50%;
    stroke-dashoffset:  20%;
    fill:hsl(189, 68%, 75%)
 
  }
  
  100% {
    stroke-dasharray: 50% 0;
    stroke-dashoffstet: -20%;
    fill: hsla(189, 68%, 75%,0%)
  }
  
}
 
</style>
  <div class=”patterns”>
  <svg width=”100%” height=”100%”>
    <defs>
    
       
      
    </defs>
              
  
     
    
   
 <text x=”50%” y=”60%”  text-anchor=”middle”>
 
  STYX
 
 </text>
 </svg>
</div>

The "Aether"

STYX

<style>
.title {
font-family: “Josefin Sans”;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 1px;
font-size: 5rem;
}
 
h2 {
background-image: url(https://styx.nyx-labs.com/wp-content/uploads/2021/03/tumblr_4fda5376a50074ce551710adcf3988d3_686a3032_400-1.gif);
background-size: contain;
color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
text-transform: uppercase;
font-size: 240px;
line-height: .75;
margin: 10px 0;
 font-weight: bold;
 
}
/* styling my button */
 
.white-mode {
text-decoration: none;
padding: 7px 10px;
background-color: #122;
border-radius: 3px;
color: #FFF;
transition: .35s ease-in-out;
position: absolute;
left: 15px;
bottom: 15px;
 font-weight: bold;
 
}
 
.white-mode:hover {
background-color: #FFF;
color: #122;
 font-weight: bold;
}
 
</style>
<div class=”title”>
 
<h2>STYX</h2>
 
</div>
About this Soul ZeroOoC
Tell us something about yourself.
Copyright © 2022 STYX — Primer WordPress theme by GoDaddy