SpaceHey layout help

For some reason whenever I do code for the name text like the animation, it turns into a rainbow block (I’m fairly new to CSS coding and coding in general)

Here’s the code:

<style>
.profile h1 {
font-size: 130px;
font-family: creepster;
font-weight: 550;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: myAnim 2s infinite;
}

@keyframes myAnim {
0% {
transform: scale3d(1, 1, 1);
background: red;
}

14% {
background: orange;
}

30% {
transform: scale3d(1.25, 0.75, 1);
background: yellow;
}

40% {
transform: scale3d(0.75, 1.25, 1);
background: green;
}

50% {
transform: scale3d(1.15, 0.85, 1);
background: blue;
}

57% {
background: indigo;
}

65% {
transform: scale3d(0.95, 1.05, 1);
background: violet;
}

75% {
transform: scale3d(1.05, 0.95, 1);
}

85% {
background: indigo;
}

100% {
transform: scale3d(1, 1, 1);
background: red;
}
}
</style>