Css Svg动画在Firefox中不工作-在chrome和opera中工作

我使用下面的svg动画代码，它在chrome和opera中运行良好，但在Mozilla Firefox中不起作用

请注意，我的所有浏览器都已更新

.st0{fill:#fff；；stroke:#282828；笔划宽度：3；笔划斜接限制：5；过渡：.8s；}
.st0{
笔划阵列：2000；
笔划偏移：0；
-webkit动画：向前直线冲刺；
-o型动画：直线前进；
-moz动画：向前直线冲刺；
动画：直线前进；
}
.st2{填充：#fff；；笔划：#282828；笔划宽度：2；笔划斜接限制：5；过渡：.8s；}
.st2{
笔划阵列：2000；
笔划偏移：0；
-webkit动画：向前直线冲刺；
-o型动画：直线前进；
-moz动画：向前直线冲刺；
动画：直线前进；
}
.st1{填充：#fff；；笔划：#20b21f；笔划宽度：3；笔划斜接限制：5；过渡：.8s；}
.st1{
笔划阵列：2000；
笔划偏移：0；
-webkit动画：向前直线冲刺；
-o型动画：直线前进；
-moz动画：向前直线冲刺；
动画：直线前进；
}
#标志{
光标：指针；
}
#徽标：hover.st0{
填写：#282828；
笔划:#282828 ;；
过渡：.8s；
笔划不透明度：0.0；
}
#徽标：hover.st1{
填充物：20b21f；
行程：20b21f；
过渡：.8s；
笔划不透明度：0.0；
}
#徽标：hover.st2{
填写：#282828；
笔划:#282828 ;；
过渡：.8s；
笔划不透明度：0.0；
}
#logo.clickit.st0{
填写：#282828；
笔划:#282828 ;；
笔划不透明度：0.0；
}
#logo.clickit.st1{
填充物：20b21f；
行程：20b21f；
笔划不透明度：0.0；
}
#logo.clickit.st2{
填写：#282828；
笔划:#282828 ;；
笔划不透明度：0.0；
}
@-webkit关键帧{
从{
行程偏移量：2000；
}
到{
笔划偏移：0；
}
}
var clicker=document.querySelector（“#logo”）；
clicker.addEventListener（'click'，function（）{
this.classList.toggle（'clickit'）；
});

我使用下面的svg动画代码，它在chrome和opera中运行良好，但在Mozilla Firefox中不起作用

---

请注意，我的所有浏览器都已更新

对于webkit，您似乎有一个

@-webkit关键帧
定义，但对于任何其他浏览器都没有

尝试添加

@keyframes dash {
    from {
        stroke-dashoffset: 2000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

加上你想支持的任何其他浏览器。
我们可以实际运行的测试用例会更容易使用。Firefox支持@-webkit关键帧吗？每晚都支持，但我认为这是当前禁用的pref背后的原因。这将是每个站点的白名单。所以一般来说，不，它不是。
@keyframes dash {
    from {
        stroke-dashoffset: 2000;
    }
    to {
        stroke-dashoffset: 0;
    }
}