annaneedshelp annaneedshelp - 5 months ago 32
CSS Question

CSS animation doesn't work in Mozilla

Can anyone see what I do wrong? I'm trying to make my animation css work in Firefox but somehow, it still doesn't work.

.animatietekst {
-webkit-animation: scaling 1s 10 ease;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation: scaling 1s 10 ease;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
}

@-webkit-keyframes scaling {
from {
-webkit-transform: scale(0.96);
}
to {
-webkit-transform: scale(1);
}
}

@-moz-keyframes scaling {
from {
-webkit-transform: scale(0.96);
}
to {
-webkit-transform: scale(1);
}
}

Answer

Firefox doesn't recognise webkit transforms

@-moz-keyframes scaling {
        from {
            -moz-transform: scale(0.96);
        }
        to {
            -moz-transform: scale(1);
        }
    }

In any case you don't need the moz prefix any more

@keyframes scaling {
        from {
            transform: scale(0.96);
        }
        to {
           transform: scale(1);
        }
    }

will work just fine with

   .animatietekst {
     -webkit-animation: scaling 1s 10 ease;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
     animation: scaling 1s 10 ease;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    }