CSS 动画在 Mozilla 中不起作用答案

【问题标题】：CSS animation doesn't work in MozillaCSS 动画在 Mozilla 中不起作用
【发布时间】：2016-10-22 21:31:22
【问题描述】：

谁能看到我做错了什么？我试图让我的动画 css 在 Firefox 中工作，但不知何故，它仍然不起作用。

                    .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 从版本 16 开始支持无前缀：developer.mozilla.org/en-US/docs/Web/CSS/…
你不是在@-moz-keyframes 代码块中使用了错误的webkit- 前缀吗？
我想你应该看看这个https://css-tricks.com/almanac/properties/a/animation/

标签： css firefox animation mozilla

【解决方案1】：

Firefox 无法识别 webkit 转换

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

无论如何，您不再需要 moz 前缀

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

可以正常使用

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

【讨论】：