Search code examples
cssfirefoxanimationmozilla

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

Solution

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