且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

CSS动画在Mozilla中不起作用

更新时间:2023-01-08 15:32:11

无法识别 webkit 转换

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




$ b $ p $在任何情况下你都不需要 moz 前缀更多
  @keyframes scaling {
from {
变换:比例(0.96);
}
到{
transform:scale(1);




$ p $可以正常工作

  .animatietekst {
-webkit-animation:scaling 1s 10 ease;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
动画:缩放1秒10缓解;
animation-iteration-count:infinite;
animation-direction:alternate;
}


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

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