如何合并两段CSS实现星级的金色闪光与滚动缩放效果

我正在使用Cornerstone Themeco Active X builder，希望为评论星级添加金色闪光效果，已通过以下CSS类实现：

.css-selector-star-gold {
    background: linear-gradient(270deg, #eede5e, #dbbb0f, #f3f2e7, #ddcd4c, #eede5e);
    background-size: 1000% 1000%;

    -webkit-animation: GoldGradiant 8s ease infinite;
    -moz-animation: GoldGradiant 8s ease infinite;
    animation: GoldGradiant 8s ease infinite;
}

@-webkit-keyframes GoldGradiant {
    0%{background-position:0% 11%}
    50%{background-position:100% 90%}
    100%{background-position:0% 11%}
}
@-moz-keyframes GoldGradiant {
    0%{background-position:0% 11%}
    50%{background-position:100% 90%}
    100%{background-position:0% 11%}
}
@keyframes GoldGradiant {
    0%{background-position:0% 11%}
    50%{background-position:100% 90%}
    100%{background-position:0% 11%}
}

后续想为星级添加滚动缩放效果，对应的CSS代码如下：

animation: StarScale 2s ease 0s 1 normal forwards;
@keyframes StaScale {
    0% {
        transform: scale(0.5);
    }
    100% {
        transform: scale(1);
    }
}

但使用内置动画时运行卡顿，因此希望将两段CSS整合到同一个类中。尝试合并代码后，仅缩放动画生效，闪光效果失效，请问该如何正确合并这两段CSS？

解决方案 #

导致问题的两个核心原因：

• 重复声明animation属性会直接覆盖之前的动画，需在同一个animation属性中用逗号分隔多个动画规则
• 缩放动画的关键帧名称存在拼写错误（StaScale应为StarScale），导致动画无法正确绑定

以下是修复后的完整合并代码：

.css-selector-star-gold {
    background: linear-gradient(270deg, #eede5e, #dbbb0f, #f3f2e7, #ddcd4c, #eede5e);
    background-size: 1000% 1000%;

    /* 同时声明两个动画，用逗号分隔规则 */
    -webkit-animation: GoldGradiant 8s ease infinite, StarScale 2s ease 0s 1 normal forwards;
    -moz-animation: GoldGradiant 8s ease infinite, StarScale 2s ease 0s 1 normal forwards;
    animation: GoldGradiant 8s ease infinite, StarScale 2s ease 0s 1 normal forwards;
}

/* 闪光动画关键帧 */
@-webkit-keyframes GoldGradiant {
    0%{background-position:0% 11%}
    50%{background-position:100% 90%}
    100%{background-position:0% 11%}
}
@-moz-keyframes GoldGradiant {
    0%{background-position:0% 11%}
    50%{background-position:100% 90%}
    100%{background-position:0% 11%}
}
@keyframes GoldGradiant {
    0%{background-position:0% 11%}
    50%{background-position:100% 90%}
    100%{background-position:0% 11%}
}

/* 缩放动画关键帧（修复拼写错误） */
@-webkit-keyframes StarScale {
    0% {
        transform: scale(0.5);
    }
    100% {
        transform: scale(1);
    }
}
@-moz-keyframes StarScale {
    0% {
        transform: scale(0.5);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes StarScale {
    0% {
        transform: scale(0.5);
    }
    100% {
        transform: scale(1);
    }
}

效果说明 #

• 闪光动画（GoldGradiant）保持无限循环，缩放动画（StarScale）仅执行一次并停留在最终缩放状态（forwards），两者可同时运行互不干扰
• 保留了-webkit-和-moz-前缀，确保在不同浏览器中都能正常触发动画

内容的提问来源于stack exchange，提问作者Tom Arnold-Hames