CSS 过渡在 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 animations。我只为你做了绿色的：

#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（将名称更改为您想要的任何名称）
• 将4200ms 从0% 移动到100%。我加倍了，因为我认为您的逻辑使 2100ms 从 rotate(0) 移动到 rotate(70)。
• alternate 动画的方向，以便它来回移动而不是向一个方向移动，然后迅速回到开始的位置。
• 重复动画infinitely
• 使用 ease-in-out 就像您在 javascript 中所做的那样，在它接近尾声时放慢速度。

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