CSS 过渡'spazing' Firefox 上随机一些元素

Question

首先，它在Chrome上对我来说100%正常，但在Firefox 上的工作方式与标题所描述的一样

我正在尝试制作一个简单的动画(使用过渡)，当鼠标悬停时无限期运行，当鼠标退出时慢慢回到初始位置

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

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

var arcs = $("#logoSec");
var greenarc = $(".greenarc");
var garcMs = 2100; // In ms
var arcsAnimBool = false; // If false, stops the anim loop
greenarc.css({
transition: "transform " + (garcMs * 1) + "ms ease-in-out"
});
function greenArcNormal() {
if (!arcsAnimBool) return;
greenarc.css("transform", "rotate(70deg)");
setTimeout(greenArcRevert, garcMs); // Call the reverse rotation after garcMs ms
}
function greenArcRevert() {
if (!arcsAnimBool) return;
greenarc.css("transform", "rotate(-70deg)");
setTimeout(greenArcNormal, garcMs); // Call the normal rotation after garcMs ms
}
arcs.hover(
function() { // On mouseover
arcsAnimBool = true;
greenarc.css({
transition: "transform " + (garcMs * 1) + "ms ease-in-out"
});
greenArcNormal();
},
function() { // On mouseout
arcsAnimBool = false; // Set to false to stop the infinite loop of greenArcRevert/Normal
greenarc.css("transform", "rotate(0deg)"); // Revert arc back to initial position
greenarc.css({
transition: "transform " + (garcMs * 0.5) + "ms ease-in-out"
});
}
);

#ArcsLogo {
height: 550px;
}
#logoSec {
display: flex;
background-color: #fdfdfd;
}

<div id="logoSec">
<svg class="arcs" version="1.1" id="ArcsLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-12 30 383.4 407.5" style="enable-background:new 0 0 383.4 407.5;" xml:space="preserve">
<style type="text/css">
.greenarc {
fill: #00ff00;
transform-origin: 50% 50%;
}
.graycircle {
fill: #5d5d5d;
transform-origin: 50% 50%;
}
.redarc {
fill: #ff0000;
transform-origin: 50% 50%;
}
</style>
<path id="GreenArc" class="greenarc" d="M201.1,62.7c-3.2,0-6.3,0.1-9.4,0.3c77.7,5.5,136.2,72.9,130.7,150.6
c-4.9,70-60.7,125.8-130.7,130.7c3.1,0.2,6.3,0.4,9.4,0.4c77.9,0,141-63.1,141-141S279,62.7,201.1,62.7L201.1,62.7z" />
<circle id="GrayCircle" class="graycircle" cx="191.7" cy="203.7" r="21.2" />
<path id="RedArc" class="redarc" d="M60.2,203.7c0-84.6,65.9-154.6,150.4-159.6c-3.1-0.2-6.3-0.3-9.5-0.3
C112.8,43.2,40.7,114.2,40,202.5c-0.7,88.3,70.3,160.4,158.6,161.1c0.8,0,1.7,0,2.5,0c3.2,0,6.3-0.1,9.5-0.3
C126.2,358.3,60.2,288.3,60.2,203.7z" />
</svg>
</div>

(jsfiddle中的简化代码)https://jsfiddle.net/Ferdam/htxcwanu/28/

(旧的完整代码：https://jsfiddle.net/Ferdam/9kz52e6h/3/)

我对HTML/JS/JQuery/CSS没有什么经验，所以我可能缺少一些基本的东西，我不知道。

感谢您的帮助。谢谢

编辑：

直接引用我对nivoli的回答：

我忘了提到我以前尝试过使用关键帧，但问题是我无法让它像我提供的代码那样工作因为每当我悬停在元素上时，它们就会"传送"回初始位置，这就是我开始使用css转换的原因。我只是找不到一种方法来动画元素回到初始位置使用关键帧

Answer 1

不需要javascript；只需使用css动画。我只为你做了绿色的：

#ArcsLogo {
height: 550px;
}
#logoSec {
background-color: #fefefe;
}
.greenarc {
fill: #00ff00;
transform-origin: 50% 50%;
transform: rotate(70deg);
animation: myRotate 4200ms alternate infinite ease-in-out;
}
.graycircle {
fill: #5d5d5d;
transform-origin: 50% 50%;
}
.redarc {
fill: #ff0000;
transform-origin: 50% 50%;
}
@keyframes myRotate {
0% {
transform: rotate(70deg);
}
100% {
transform: rotate(-70deg);
}
}

<div id="logoSec">
<svg class="arcs" version="1.1" id="ArcsLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-12 30 383.4 407.5" style="enable-background:new 0 0 383.4 407.5;" xml:space="preserve">
<path id="GreenArc" class="greenarc" d="M201.1,62.7c-3.2,0-6.3,0.1-9.4,0.3c77.7,5.5,136.2,72.9,130.7,150.6
c-4.9,70-60.7,125.8-130.7,130.7c3.1,0.2,6.3,0.4,9.4,0.4c77.9,0,141-63.1,141-141S279,62.7,201.1,62.7L201.1,62.7z" />
<circle id="GrayCircle" class="graycircle" cx="191.7" cy="203.7" r="21.2" />
<path id="RedArc" class="redarc" d="M60.2,203.7c0-84.6,65.9-154.6,150.4-159.6c-3.1-0.2-6.3-0.3-9.5-0.3
C112.8,43.2,40.7,114.2,40,202.5c-0.7,88.3,70.3,160.4,158.6,161.1c0.8,0,1.7,0,2.5,0c3.2,0,6.3-0.1,9.5-0.3
C126.2,358.3,60.2,288.3,60.2,203.7z" />
</svg>
</div>

它们的关键是定义keyframes，我刚刚从您在javascript中所做的transform声明中复制了它。然后，通过将animation规则添加到greenarc类，我们将其告知

• 使用关键帧myRotate(将名称更改为所需名称)
• 取CCD_ 6从CCD_ 7移动到CCD_。我把它增加了一倍，因为我认为你的逻辑需要2100ms才能从rotate(0)移动到rotate(70)
• alternate动画的方向，使其前后移动，而不是在一个方向上移动，然后捕捉回开始的位置
• 重复动画infinitely
• 像在javascript中那样使用ease-in-out，以在接近尾声时放慢速度

有关更多详细信息和示例，请参阅动画文档。