Javascript 未使用Mozilla AnimationName在Mozilla中执行CSS动画 @关键帧抖动{ 0% { -moz变换：比例（0）；不透明度：0； } 25% { -moz变换：比例（1.3）；不透明度：1； } 50% { -moz变换：比例（0.7）；不透明度：1； } 75% { -moz变换：比例（2）；不透明度：1； } 100% { -moz变换：缩放（1）；不透明度：1；-moz变换：旋转（45度）； } } 试验

它在Google Chrome中使用相应的

-webkit

前缀可以正常工作，但在Firefox（

-moz

）中，它不能正常工作

有没有办法解决这个问题，或者这只是我一个愚蠢的错误？此外，我不想将jQuery用于我的解决方案。

它不起作用，因为（从Firefox 16开始），所以只需删除以下内容：

@关键帧抖动{
0% {
变换：比例（0）；
不透明度：0；
}
25% {
转换：比例（1.3）；
不透明度：1；
}
50% {
变换：比例（0.7）；
不透明度：1；
}
75% {
变换：尺度（2）；
不透明度：1；
}
100% {
变换：比例（1）；
不透明度：1；
变换：旋转（45度）；
}
}
试验

它不起作用，因为（从Firefox 16开始），所以只需删除以下内容：

@关键帧抖动{
0% {
变换：比例（0）；
不透明度：0；
}
25% {
转换：比例（1.3）；
不透明度：1；
}
50% {
变换：比例（0.7）；
不透明度：1；
}
75% {
变换：尺度（2）；
不透明度：1；
}
100% {
变换：比例（1）；
不透明度：1；
变换：旋转（45度）；
}
}
试验

this.style.mozAnimationName='shake'也许？编辑了我的帖子。但同样的问题仍然存在@phil我刚才无意中用它的CSS等价物编辑了它。你能把一个JSFIDLE放在一起吗？另外，尝试一下style.animationName

Sure thing mate@Phil

this.style.mozAnimationName='shake'也许？编辑了我的帖子。但同样的问题仍然存在@phil我刚才无意中用它的CSS等价物编辑了它。你能把一个JSFIDLE放在一起吗？另外，尝试一下style.animationName

Sure thing mate@菲尔，我觉得我是个特别的白痴。。。但是为什么它们不能向后兼容这些前缀呢？这对我来说似乎有点奇怪。在某些版本下，他们可能支持这两种语言，这样他们就可以转换成不带前缀的语言，不过我不确定，我会看看是否能找到关于这方面的任何信息。在这里，您可以查看版本历史记录以及何时不再需要前缀：。点击“全部显示”。别担心，我之前也没意识到这一点。我开始做的，我推荐的，是使用，所以你不必担心这样的事情。神圣的烟

无前缀
真是难以置信！你从哪里听说的？我现在就要使用它，我有大量依赖CSS3的样式表！我不记得了，哈哈，但是有很多方法可以解决前缀问题，我同意这是一个非常棒的方法。我认为也有“预处理器”会自动添加前缀。我觉得我是一个特殊类型的白痴。。。但是为什么它们不能向后兼容这些前缀呢？这对我来说似乎有点奇怪。在某些版本下，他们可能支持这两种语言，这样他们就可以转换成不带前缀的语言，不过我不确定，我会看看是否能找到关于这方面的任何信息。在这里，您可以查看版本历史记录以及何时不再需要前缀：。点击“全部显示”。别担心，我之前也没意识到这一点。我开始做的，我推荐的，是使用，所以你不必担心这样的事情。神圣的烟
无前缀
真是难以置信！你从哪里听说的？我现在就要使用它，我有大量依赖CSS3的样式表！我不记得了，哈哈，但是有很多方法可以解决前缀问题，我同意这是一个非常棒的方法。我认为还有一些“预处理器”会自动添加前缀。
<style>

@keyframes shake {
    0% {
        -moz-transform:scale(0);opacity:0;
    }
    25% {
        -moz-transform:scale(1.3);opacity:1;
    }
    50% {
        -moz-transform:scale(0.7);opacity:1;
    }
    75% {
        -moz-transform:scale(2);opacity:1;
    }
    100% {
        -moz-transform:scale(1);opacity:1;-moz-transform:rotate(45deg);
    }
}


</style>

<div style="-moz-animation-duration:2s;" onclick='this.style.mozAnimationName="shake";'>TEST</div>

<style>

@keyframes shake {
    0% {
        transform: scale(0);
        opacity:0;
    }
    25% {
        transform: scale(1.3);
        opacity: 1;
    }
    50% {
        transform: scale(0.7);
        opacity: 1;
    }
    75% {
        transform: scale(2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
        transform: rotate(45deg);
    }
}


</style>

<div style="animation-duration: 2s;" onclick='this.style.animationName = "shake";'>TEST</div>