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

Question

只是遇到了火狐的问题。只是遇到火狐问题。只是遇到火狐问题。只是遇到火狐问题。只是遇到火狐问题。只是遇到火狐问题。只是遇到火狐问题。只是遇到火狐问题。

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