SCSS Animation Does Not Work For Some Reason - html

Question

So the main issue here is that when I load the web page, the animation does not move and is static. Additionally, I wanted the text to be on the top of the .star; however, despite many attempts of changing the order of the code, that does not seem to work either.
I have used multiple different CSS to SCSS converters to convert this code; however, it does not seem to work at all. I have tried different ways to counteract the issue as well as doing a lot of research.
Visual Representation:
Screenshot
OR... You may also check my website directly!
SCSS Code:
div.info_box {
width: 85%;
margin-top: -50px;
padding: 30px;
position: relative;
z-index: 1;
// text-align: center;
background: linear-gradient(125deg, #00103a 0%, #3e5f77 100%);
color: #fff;
// margin-top: $section-padding;
border-radius: $border-radius-sections;
.info_title {
text-align: left;
// max-width: 75%;
margin: 0 auto;
color: #fff;
h1 {
color: white;
font-size: 230%;
}
h2,
h3,
article {
color: white;
font-size: 130%;
}
}
// Animations
#keyframes tail {
0% {
width: 0;
}
30% {
width: 100px;
}
100% {
width: 0;
}
}
#keyframes shining {
0% {
width: 0;
}
50% {
width: 30px;
}
100% {
width: 0;
}
}
#keyframes shooting {
0% {
transform: translateX(0);
}
100% {
transform: translateX(320px);
}
}
.star {
position: absolute;
top: 50%;
left: 50%;
width: 180px;
background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
filter: drop-shadow(0 0 6px #699bff);
animation: tail 3000ms ease-in-out infinite shooting 3000ms ease-in-out infinite;
&::before {
position: absolute;
content: "";
top: calc(50% - 1px);
right: 0;
height: 2px;
width: 30px;
background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
border-radius: 100%;
transform: translateX(50%) rotateZ(45deg);
}
&::after {
position: absolute;
content: "";
top: calc(50% - 1px);
right: 0;
height: 2px;
width: 30px;
background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
border-radius: 100%;
transform: translateX(50%) rotateZ(45deg);
transform: translateX(50%) rotateZ(-45deg);
}
&:nth-child(1) {
top: calc(50% - 200px);
left: calc(50% - 300px);
animation-delay: 650ms;
&::before {
animation-delay: 650ms;
}
&::after {
animation-delay: 650ms;
animation-delay: 150ms;
animation-delay: 1600ms;
animation-delay: 4700ms;
animation-delay: 2100ms;
}
}
&:nth-child(2) {
top: calc(50% - -50px);
left: calc(50% - 190px);
animation-delay: 150ms;
&::before {
animation-delay: 150ms;
}
}
&:nth-child(3) {
top: calc(50% - -90px);
left: calc(50% - 200px);
animation-delay: 1600ms;
&::before {
animation-delay: 1600ms;
}
}
&:nth-child(4) {
top: calc(50% - 50px);
left: calc(50% - 250px);
animation-delay: 4700ms;
&::before {
animation-delay: 4700ms;
}
}
&:nth-child(5) {
top: calc(50% - -190px);
left: calc(50% - 200px);
animation-delay: 2100ms;
&::before {
animation-delay: 2100ms;
}
}
}
HTML Code:
<div style="align-self: flex-start; justify-self: center;" class="info_box">
<div class="info_title">
<h1><b>Welcome Nerds 🤓</b></h1>
<h3><i>Currently in a near-rectilinear halo orbit.</i><br><br>My name is <b>John</b>. I am a
<b>digital
creator</b>, a self-employed <b>software engineer</b>, a <b>cinematographer</b>,
and
most importantly, a full-time <b>high school student</b>.
</h3>
<br>Learn more about John 👊
</div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>

Answer 1

There are at least 2 problems with this.
The first is that the animtion definition under .star is invalid:
animation: tail 3000ms ease-in-out infinite shooting 3000ms ease-in-out infinite;
You can see this if you go to your browser's dev tools inspect facility - it reports the property value as invalid. (You need to set a list).
The second is that the keyframes definitions seem to be nested but need to be brought out separately. (AFAIK the preprocessor doesn't spot this and do it for you).