CSS animation doesn't work in Mozilla

一曲冷凌霜 提交于 2019-12-24 09:37:49

问题


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

回答1:


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


来源:https://stackoverflow.com/questions/37942642/css-animation-doesnt-work-in-mozilla

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!