SASS-CSS动画在Chrome正常运行，Firefox中失效求助

问题根源 #

我一眼就发现问题啦！你的动画在Firefox里失效是因为关键帧语法有错误——所有100的位置都少写了百分号%。Firefox对CSS语法的校验比其他浏览器更严格，这个小疏漏直接导致整个动画规则被浏览器忽略，而Chrome等浏览器可能会容错解析，这就是为什么只有Firefox出问题的原因。

修正后的完整SCSS代码 #

// 定义颜色过渡动画的mixin
@mixin errorDivPulse ($color1, $backGround1, $color2, $backGround2,$animName ) {
  @keyframes #{$animName} {
    0% { 
      color: $color1; 
      background-color: $backGround1; 
    }
    50% { 
      color: $color2; 
      background-color: $backGround2; 
    }
    100% {  // 这里补上了缺失的%
      color: $color1; 
      background-color: $backGround1; 
    }
  }

  // 若需兼容极老版本浏览器，可保留带前缀的规则
  @-moz-keyframes #{$animName} {
    0% { 
      color: $color1; 
      background-color: $backGround1; 
    }
    50% { 
      color: $color2; 
      background-color: $backGround2; 
    }
    100% {  // 补上%
      color: $color1; 
      background-color: $backGround1; 
    }
  }

  @-webkit-keyframes #{$animName} {
    0% { 
      color: $color1; 
      background-color: $backGround1; 
    }
    50% { 
      color: $color2; 
      background-color: $backGround2; 
    }
    100% {  // 补上%
      color: $color1; 
      background-color: $backGround1; 
    }
  }

  @-ms-keyframes #{$animName} {
    0% { 
      color: $color1; 
      background-color: $backGround1; 
    }
    50% { 
      color: $color2; 
      background-color: $backGround2; 
    }
    100% {  // 补上%
      color: $color1; 
      background-color: $backGround1; 
    }
  }
}

// 定义应用动画的元素样式mixin
@mixin errorDiv($foreGround,$backGround,$animName) {
  color: $foreGround !important;
  background-color: $backGround !important;
  @if($animName) {
    animation: $animName 1s infinite;
    // 前缀规则按需保留即可
    -moz-animation: $animName 1s infinite;
    -webkit-animation: $animName 1s infinite;
    -ms-animation: $animName 1s infinite;
  }
}

// 原使用方式不变
@include errorDivPulse($black,$orange,$white,#ff1200,animC);
.errorDiv { 
  @include errorDiv($black,$orange,animC); 
}

额外优化建议 #

• 现在主流浏览器（包括Firefox 16+、Chrome 43+）都支持不带前缀的@keyframes和animation属性，如果你不需要兼容极老旧的浏览器版本，可以直接去掉所有带前缀的规则，让代码更简洁。
• 尽量避免使用!important，如果样式被覆盖，优先通过提高选择器权重来解决，这样能减少后续样式冲突的风险。

验证步骤 #

1. 把修正后的代码替换到你的SCSS文件中
2. 重新编译Angular项目（执行ng serve或ng build）
3. 在Firefox中刷新页面，就能看到正常的颜色过渡动画了

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