htmlcssfirefox

CSS not working in Firefox even when declaring -moz


Just having an issues with firefox.Just having an issues with firefox. Just having an issues with firefox. Just having an issues with firefox.Just having an issues with firefox.Just having an issues with firefox. Just having an issues with firefox. Just having an issues with 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; 
}

Solution

  • You don't need the -moz prefix in Firefox 23+, you can just use the intended CSS keyframe declaration (which you don't have in your current CSS). This will work in IE10+ as well. You also don't need to wrap the animation name in quotes, either:

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