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"
<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>
