firefox中的CSS变换旋转像素问题

我正在尝试使用transform rotate属性创建swing按钮， 它在opera和chrome浏览器中运行良好，但在firefox中，它的按钮边框会产生奇怪的像素问题：

按钮和摆动关键帧的css代码

.RedButton{
背景色：#bc0000；
边界半径：7px；
边框：1px实心#bc0000；
显示：内联块；
光标：指针；
颜色：#fff！重要；
字体系列：Arial；
字体大小：30px；
字体大小：粗体；
填充：7px 24px；
文字装饰：无；
边缘顶部：15px；
动画：swing 5s无限；
-moz动画：swing 5s无限；
过渡：0.2s；
-moz跃迁：0.2s；
}
@-moz关键帧摆动{
20%,
60% {
-moz变换：旋转（5度）；
}
40%,
80% {
-moz变换：旋转（-5度）；
}
100% {
-moz变换：旋转（0度）；
}
}
@关键帧摆动{
20%,
60% {
变换：旋转（5度）；
}
40%,
80% {
变换：旋转（-5度）；
}
100% {
变换：旋转（0度）；
}
}

---

现在就开始

背面可见性

似乎根据此SO线程进行工作：

---

如果这不起作用，请尝试：

outline:1px实心透明
添加一个小阴影使其看起来更好：


.RedButton{
背景色：#bc0000；
边界半径：7px；
边框：1px实心#bc0000；
显示：内联块；
光标：指针；
颜色：#fff；
字体系列：Arial；
字体大小：30px；
字体大小：粗体；
填充：7px 24px；
文字装饰：无；
边缘顶部：15px；
动画：swing 5s无限；
盒影：0 1px#bc0000；
}
@关键帧摆动{
20%,
60% {
变换：旋转（5度）；
}
40%,
80% {
变换：旋转（-5度）；
}
}
现在就开始我已经尝试了你的代码一切正常-Firefox 77.0.1-Win 10可能有助于添加你正在运行的Firefox版本和你的操作系统；）@SimoneRossaini我使用的是和你完全相同的FF版本，但是反锯齿看起来很可怕（就像OP的一样）：@Terry怎么可能：0？@Temani Afif的答案让它变得更好。你试过了吗？另外，你链接的问题是关于Chrome和没有Firefox的。在人们谈论的关于Firefox的问题中@TemaniAfif@geauser，不起作用，但长方体阴影使其更好。谢谢你的回答。不是100%固定，但要做得更好，tnx朋友@多米克，你还可以再增加一点（2倍）是的，我知道，tnx兄弟！
.RedButton {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
   // ...
}