css - SASS - CSS - 动画在 chrome 中有效，在 firefox 中无效

Question

我尝试为一个 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; 
        }
    }
}

Answer 1

答案是默认 div CSS 中的 !importance 我真傻

@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;
    }
}