SCSS流星动画静态不生效、文本无法置于.star上层问题求助

问题1：SCSS动画无效果的修复方案 #

动画不生效存在3处语法/逻辑错误：

• .star元素的animation属性中多个动画之间缺少英文逗号分隔，浏览器无法正常识别属性值
• 定义了shining关键帧但未绑定到.star的::before和::after伪元素上，伪元素的星光闪烁效果无法触发
• 第一个.star的::after重复声明了5次animation-delay，仅最后一条会生效，多余声明需要删除

问题2：文本显示在.star上层的修复方案 #

通过层级设置即可实现需求：

• 给文本容器.info_title添加position: relative; z-index: 2;，开启层级计算
• 给.star添加z-index: 1;，确保流星元素层级低于文本容器

修正后的完整SCSS代码 #

div.info_box {
    width: 85%;
    margin-top: -50px;
    padding: 30px;
    position: relative;
    z-index: 1;
    background: linear-gradient(125deg, #00103a 0%, #3e5f77 100%);
    color: #fff;
    border-radius: $border-radius-sections;
    .info_title {
        position: relative;
        z-index: 2;
        text-align: left;
        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;
        z-index: 1;
        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);
            /* 绑定shining动画 */
            animation: shining 3000ms ease-in-out infinite;
        }
        &::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);
            /* 绑定shining动画 */
            animation: shining 3000ms ease-in-out infinite;
        }
        &:nth-child(1) {
            top: calc(50% - 200px);
            left: calc(50% - 300px);
            animation-delay: 650ms;
            &::before {
                animation-delay: 650ms;
            }
            &::after {
                animation-delay: 650ms;
            }
        }
        &:nth-child(2) {
            top: calc(50% - -50px);
            left: calc(50% - 190px);
            animation-delay: 150ms;
            &::before {
                animation-delay: 150ms;
            }
            &::after {
                animation-delay: 150ms;
            }
        }
        &:nth-child(3) {
            top: calc(50% - -90px);
            left: calc(50% - 200px);
            animation-delay: 1600ms;
            &::before {
                animation-delay: 1600ms;
            }
            &::after {
                animation-delay: 1600ms;
            }
        }
        &:nth-child(4) {
            top: calc(50% - 50px);
            left: calc(50% - 250px);
            animation-delay: 4700ms;
            &::before {
                animation-delay: 4700ms;
            }
            &::after {
                animation-delay: 4700ms;
            }
        }
        &:nth-child(5) {
            top: calc(50% - -190px);
            left: calc(50% - 200px);
            animation-delay: 2100ms;
            &::before {
                animation-delay: 2100ms;
            }
            &::after {
                animation-delay: 2100ms;
            }
        }
    }
}

HTML代码无需修改，直接使用原有代码即可生效。

内容的提问来源于stack exchange，提问作者John Seong