无法覆盖外部SCSS的!important规则实现CSS @keyframes盒子颜色切换

问题根因 #

1. 选择器匹配错误：你现有动画的目标选择器是#preparando div .small-box .bginfo，但DOM结构中盒子元素的类是.small-box.bg-info，不存在.bginfo类，动画规则根本匹配不到目标元素。
2. CSS标准限制：@keyframes中定义的样式优先级天生低于直接作用在元素上的!important规则，哪怕你在关键帧里加!important也不会生效，这是规范层面的限制，和选择器优先级无关。

可行解决方案 #

方案1：CSS变量中转（无JS、改动最小） #

这是最优方案，利用你已经生效的高优先级!important规则绑定自定义变量，动画只负责动态修改变量值，完全绕开关键帧优先级限制：

1. 修改你现有覆盖外部样式的规则，把背景色绑定到自定义变量：

html body div #preparando .small-box {
  /* 把背景色值替换为自定义变量，默认值保留你原来的成功色 */
  background-color: var(--small-box-bg, var(--bs-success)) !important;
}

2. 修正动画选择器，改写动画逻辑为修改变量值：

#preparando .small-box.bg-info {
  animation: change 10s step-end both !important;
}

@keyframes change {
  to { 
    /* 仅修改自定义变量的值即可触发背景色变化 */
    --small-box-bg: var(--bs-warning);
  }
}

方案2：移除冲突类（一劳永逸） #

外部的!important颜色规则是绑定在.bg-info类上的，直接用JS删掉这个类，外部规则直接失效，你的动画代码只要修正选择器就能正常运行：

document.querySelectorAll('#preparando .small-box.bg-info').forEach(el => {
  el.classList.remove('bg-info');
});

方案3：JS定时器切换类（兼容性最好） #

如果需要兼容不支持CSS变量的老旧浏览器，可以用JS定时切换高优先级类实现需求：

/* 新增高优先级的警告色规则 */
html body div #preparando .small-box.small-box--warning {
  background-color: var(--bs-warning) !important;
}

// 10秒后切换为警告色，需要循环切换可自行修改为toggle逻辑
setTimeout(() => {
  document.querySelector('#preparando .small-box').classList.add('small-box--warning');
}, 10000);

内容的提问来源于stack exchange，提问作者Lucas.ngr