CSS 过渡在 Firefox 上随机“spazing”一些元素

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 （将名称更改为您想要的任何名称）
• 从0%到100%需要4200ms 。 我将它翻了一番，因为我认为您的逻辑从rotate(0)移动到rotate(70)需要2100ms 。
• alternate动画的方向，使其前后移动，而不是朝一个方向移动，然后又回到开始的位置。
• infinite重复动画
• 使用ease-in-out就像您在 javascript 中所做的那样，随着它接近结束而减慢速度。

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