Javascript CSS转换'；喷洒'；Firefox上的一些随机元素

首先，它在Chrome上100%运行良好，但在Firefox上的效果与标题所描述的一样

我试图制作一个简单的动画（使用过渡），在鼠标经过时无限期运行，在鼠标离开时缓慢返回初始位置

问题是它在Firefox中的行为方式不同

根据要求，这里有一个最小化和简化的代码，它再现了我当前的问题：

var arcs=$（“#logoSec”）；
var greenarc=$（“.greenarc”）；
var garcMs=2100；//在ms中
var arcsAnimBool=false；//如果为false，则停止动画循环
greenarc.css({
转换：“转换”+（garcMs*1）+“ms轻松输入输出”
});
函数greenArcNormal（）{
如果（！arcnimbool）返回；
css（“变换”、“旋转（70度）”）；
setTimeout（greenArcRevert，garcMs）；//在garcMs之后调用反向旋转
}
函数greenArcRevert（）{
如果（！arcnimbool）返回；
css（“变换”、“旋转（-70度）”）；
setTimeout（greenArcNormal，garcMs）；//在garcMs之后调用法线旋转
}
弧线悬停(
鼠标悬停时的函数（）
arcsAnimBool=true；
greenarc.css({
转换：“转换”+（garcMs*1）+“ms轻松输入输出”
});
绿色正常（）；
},
mouseout上的函数（）{//
ArcAnimBool=false；//设置为false可停止greenArcRevert/Normal的无限循环
css（“变换”、“旋转（0度）”；//将圆弧恢复到初始位置
greenarc.css({
转换：“转换”+（garcMs*0.5）+“ms轻松输入输出”
});
}
);
#ARCS徽标{
高度：550px；
}
#logoSec{
显示器：flex；
背景色：#fdfd；
}

格林纳克先生{
填充：#00ff00；
变换原点：50%50%；
}
格雷圆先生{
填充：#5d5d5d；
变换原点：50%50%；
}
雷达克先生{
填充：#ff0000；
变换原点：50%50%；
}
无需javascript；就用吧。我只为你做了一件绿色的：


#ARCS徽标{
高度：550px；
}
#logoSec{
背景色：#fefe；
}
格林纳克先生{
填充：#00ff00；
变换原点：50%50%；
变换：旋转（70度）；
动画：myRotate 4200ms交替无限轻松输入输出；
}
格雷圆先生{
填充：#5d5d5d；
变换原点：50%50%；
}
雷达克先生{
填充：#ff0000；
变换原点：50%50%；
}
@关键帧myRotate{
0% {
变换：旋转（70度）；
}
100% {
变换：旋转（-70度）；
}
}

尝试进一步隔离您的问题，删除与问题无关的所有内容，然后返回问题解决方案。最后，也许一个元素和一条规则会成为罪魁祸首，但现在，我们有太多的工作要去挖掘它。这里有一个MCVE：请随意回答你的问题，用它来代替。我很抱歉，我现在没有时间去挖掘这个问题……哦，我很抱歉。我将很快编辑代码，以提供itI的最低版本。我已经抽出时间编辑我的文章，并包含一个更简单的代码，该代码与我之前发布的旧完整代码存在相同的问题。我忘了提到我以前尝试过使用关键帧，但问题是，我无法让它像我提供的代码那样工作，因为每当我悬停在元素上时，只是“传送”回初始位置，这就是为什么我开始使用css转换，我就是找不到一种方法来使用关键帧将元素动画化回初始位置