CODEWITHSUNDEEP
htmlcssfirefox
Wojciech Dobry
Wojciech Dobry

Reputation: 148

css animation doesn't work in firefox

My code doesnt work in Firefox and I dont know why. Any advices? It works fine in Chrome, IE and Opera. I tried almost all prefixes combinations but still it wont work. Is it possible that something is wrong with my PC or Firefox browser?

.span-accent {
    color: rgb(60, 185, 120);
    -webkit-animation: breath 2s infinite;
    -moz-animation: breath 2s infinite;
    animation: breath 2s infinite;
}

@-webkit-keyframes breath {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    25% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    75% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes breath {
    0% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
    25% {
        -moz-transform: scale(1.2);
        transform: scale(1.2);
    }
    50% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
    75% {
        -moz-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes breath {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    25% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    75% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
<h1>LAKA</h1>
<h2>architecture that <span class="span-accent">reacts.</span></h2>

Upvotes: 0

Views: 3160

Answers (1)

Wojciech Dobry
Wojciech Dobry

Reputation: 148

Ok guys, I found it.

Problem is in <span> element. For some reason Firefox doesnt animate inline elements.

So what I did is change a <span> atribute to display: inline-block. It just wont work strictly for any inline element.

Upvotes: 3

Related Questions