html - 即使声明 -moz，CSS 在 Firefox 中也不起作用

Question

只是遇到了 firefox 的问题。只是遇到了 firefox 的问题。只是Firefox有问题。只是遇到了 firefox 的问题。只是遇到了 firefox 的问题。只是遇到了 firefox 的问题。只是Firefox有问题。只是Firefox有问题。

   @-webkit-keyframes 'blink'
{
    0% {
        opacity:0;
    }
    25% {
        opacity:1;
    }
    75% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

@-moz-keyframes 'blinkmoz'
{
    0% {
        opacity:0;
    }
    25% {
        opacity:1;
    }
    75% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}


.fadein 
{
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
-webkit-animation-direction: normal;
-webkit-animation-duration: 8s;
-webkit-animation-timing-function: ease-in-out;  
-moz-animation-direction: normal;
-moz-animation-duration: 8s;
-moz-animation-timing-function: ease-in-out; 
}

Answer 1

您不需要Firefox 23+ 中的-moz前缀，您可以只使用预期的 CSS 关键帧声明（您当前的 CSS 中没有）。这也适用于 IE10+。您也不需要将动画名称用引号括起来：

@keyframes blinkmoz
{
    0% {
        opacity:0;
    }
    25% {
        opacity:1;
    }
    75% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

.fadein {
    animation-name: blinkmoz;
    animation-duration: 8s;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
}