CSS动画在Mozilla中不起作用 [英] CSS animation doesn't work in Mozilla

问题描述

任何人都可以看到我做错了什么？我试图让我的动画CSS在Firefox中工作，但不知何故，它仍然无法正常工作。

  .animatietekst {
 -webkit-animation：scaling 1s 10 ease; 
 -webkit-animation-iteration-count：infinite; 
 -webkit-animation-direction：alternate; 
 -moz-animation：缩放1s 10缓解; 
 -moz-animation-iteration-count：infinite; 
 -moz-animation-direction：alternate; 
 
 
 -webkit-keyframes scaling {
 from {
 -webkit-transform：scale（0.96）; 
} 
到{
 -webkit-transform：scale（1）; 
 
 
 $ b @ -moz-keyframes scaling {
 from {
 -webkit-transform：scale（0.96）; 
} 
到{
 -webkit-transform：scale（1）; 
 
 
 
 
解决方案
无法识别 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;
    }


                        
这篇关于CSS动画在Mozilla中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！