SASS - CSS - 动画在 chrome 中工作，而不是在 Firefox 中答案

【问题标题】：SASS - CSS - Animation works in chrome, not in firefoxSASS - CSS - 动画在 chrome 中工作，而不是在 Firefox 中
【发布时间】：2019-06-23 13:55:06
【问题描述】：

我尝试为 div 实现简单的 2 状态颜色转换

它在一个 Angular 项目中，它使用 scss 文件作为 CSS

我发现了一些关于此的其他线程，但即使我尝试应用修复，它仍然无法在 firefox 中工作

这是我如何使用下面的代码：

@include errorDivPulse($black,$orange,$white,#ff1200,animC);
.errorDiv {
    @include errorDiv($black,$orange,animC);
}

它看起来像这样（只是带有前缀的重复）：

@mixin errorDiv($foreGround,$backGround,$animName) {
    color: $foreGround !important; 
    background-color: $backGround !important; 

    @if($animName) {
        -moz-animation: $animName 1s infinite;
        -webkit-animation: $animName 1s infinite;
        -ms-animation: $animName 1s infinite;
        animation: $animName 1s infinite;
    }
}

@mixin errorDivPulse ($color1, $backGround1, $color2, $backGround2,$animName ) {
    @-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; 
        }
    }
    @keyframes #{$animName} {
        0% {
            color: $color1;
            background-color: $backGround1; 
        }
        50% {
            color: $color2;
            background-color: $backGround2; 
        }
        100 {
            color: $color1;
            background-color: $backGround1; 
        }
    }
}

【问题讨论】：

开始，你可以去掉所有的前缀版本，它们不再需要了
如果你想使用前缀，你可以使用像 postcss github.com/postcss/autoprefixer 这样的包，它会自动为属性添加前缀
好的，我会删除前缀版本，很高兴知道，但知道为什么它不起作用吗？ ...我将编辑问题...
显然它与 !important 标志有关，但如果我删除它，它会显示默认的 div 颜色，而它应该显示动画中定义的颜色

标签： css google-chrome animation firefox sass

【解决方案1】：

答案是默认 div css 中的 !importants 我傻了

@mixin errorDiv($foreGround,$backGround,$animName) {
    color: $foreGround ; 
    background-color: $backGround ; 

    @if($animName) {
        -moz-animation: $animName 1s infinite;
        -webkit-animation: $animName 1s infinite;
        -ms-animation: $animName 1s infinite;
        animation: $animName 1s infinite;
    }
}

【讨论】：