CODEWITHSUNDEEP
htmlcssfirefoxmozilla
user2885415
user2885415

Reputation:

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

Upvotes: 0

Views: 347

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

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

Upvotes: 1

Related Questions