SCSS Animation Does Not Work For Some Reason

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><a href="https://www.johnseong.info/biography/">Learn more about John 👊</a>
                    </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).