Question

只是遇到firefox的问题。我的所有CSS和动画都可以在Safari / Chrome中使用，但是当我指定-moz时，它在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-name: blink;
-webkit-animation-timing-function: ease-in-out;  
-moz-animation-direction: normal;
-moz-animation-duration: 8s;
-moz-animation-name: blinkmoz;
-moz-animation-timing-function: ease-in-out; 
}

感谢任何帮助。感谢

Answer 1

您在Firefox 23+中don't need -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;
}

即使在声明-moz时，CSS也无法在Firefox中运行

1 个答案: