code snippet not working

so i coded an animated rainbow equalizer for my layout and was thinking of sharing it as a profile element. i took what i thought was all the relevant code and tested it on a blank layout with no other code and it doesn't work? it still works just fine on my layout so i figure i'm missing something but am not sure what. i'm very new to css so sorry if it's an obvious mistake ^_^; here's the code if anyone could tell me why it's not working. thanks

<style>
.pp-equalizer {
          display: none;
  color: currentcolor !important;
              animation: rainbow 6s linear infinite !important;
          align-items: flex-end;
          gap: 2px;
          height: 14px;
          margin-right: 6px;
        }
  
.profile-playlist-widget li.current .pp-equalizer {
          display: flex !important;
        }

.pp-equalizer span { color:currentcolor !important;
              animation: rainbow 6s linear infinite, ppEqualizer 0.8s ease-in-out infinite !important;
  }
    .pp-equalizer span:nth-child(1) { 
      height: 60%; animation-delay: 0s !important; }
      .pp-equalizer span:nth-child(2) { 
      height: 100%; animation-delay: 0.2s !important; }
      .pp-equalizer span:nth-child(3) { 
      height: 40%; animation-delay: 0.4s !important; }
      .pp-equalizer span:nth-child(4) { height: 80%; animation-delay: 0.1s !important; }
  
  
      @keyframes ppEqualizer {
          0%, 100% { transform: scaleY(0.3); }
          50% { transform: scaleY(1); }
        }
  
</style>

I think the main issue is that your equalizer is hidden by default here:

.pp-equalizer {
display: none;
}

It only becomes visible when it is inside this exact structure:

.profile-playlist-widget li.current .pp-equalizer {
display: flex !important;
}

So on a blank test layout, unless you also have an element with the class “profile-playlist-widget” and an li with the class “current,” the equalizer will stay hidden.

You are also calling a rainbow animation, but there is no @keyframes rainbow included in the code you shared. The bars also need their own width, background color, display property, and transform origin. Those styles may already exist elsewhere in your full layout, which would explain why it works there but not by itself.

Here is a self-contained version:

&lt;style&gt;

.pp-equalizer {
display: flex;
align-items: flex-end;
gap: 2px;
height: 14px;
margin-right: 6px;
color: #ff5c8a;
animation: rainbow 6s linear infinite;
}

.pp-equalizer span {
display: block;
width: 3px;
height: 100%;
background: currentColor;
transform-origin: bottom;
animation: ppEqualizer 0.8s ease-in-out infinite;
}

.pp-equalizer span:nth-child(1) {
height: 60%;
animation-delay: 0s;
}

.pp-equalizer span:nth-child(2) {
height: 100%;
animation-delay: 0.2s;
}

.pp-equalizer span:nth-child(3) {
height: 40%;
animation-delay: 0.4s;
}

.pp-equalizer span:nth-child(4) {
height: 80%;
animation-delay: 0.1s;
}

@keyframes ppEqualizer {
0%,
100% {
transform: scaleY(0.3);
}

50% {
transform: scaleY(1);
}
}

@keyframes rainbow {
0% {
color: #ff5c8a;
}

20% {
color: #ff9f43;
}

40% {
color: #ffe66d;
}

60% {
color: #48dbb4;
}

80% {
color: #6c8cff;
}

100% {
color: #ff5c8a;
}
}

&lt;/style&gt;

&lt;div class="pp-equalizer"&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;
&lt;/div&gt;

Basically, the original version relies on other parts of your layout to provide the HTML structure and some of the bar styling, so it is not fully standalone yet.