Jquery 菜单图标转换在firefox中不起作用

我在codepen上找到了这个动画。 但无论如何，这在Firefox中都不起作用

您可以在此处看到动画：

css:

---

因此，这应该适用于Chrome和Firefox：

---

我认为问题在于Firefox不支持SVG的transform origin。

尝试将

-moz-

供应商前缀添加到

css

属性中。我尝试过这一点，但似乎只有Firefox的translateY值不正确，这很奇怪看到更新的codepen？嗨@Dennis刚刚用mozila firefox打开了你的url（），即使我更改了转换：300毫秒到转换：5000毫秒，它也可以正常工作，伙计。。！

rect {
  fill: red;
  transition: 300ms;
  transform-origin: center;
  border-radius: 3px;
}

svg {
  overflow: visible;
  width: 100px;
  height: 50px;
}

 .toast {
 }

.boom {
  rect {
    fill: black;
  }

  .cheese {
    transform: translateY(25px) rotate(45deg);
  }

  .toast {
    transform: translateY(-25px) rotate(-45deg);
  }
}

div {
 padding: 10%;
}

rect {
 fill: red;
 transition: 300ms;
 border-radius: 3px;
}

svg {
 overflow: visible;
 width: 100px;
 height: 50px;
}

.toast {
}

.boom {
  rect {
   fill: black;
  }

  .cheese {
   transform: rotate(45deg);
  }

  .toast {
   transform: translateX(-40px) translateY(35px) rotate(-45deg);
  }
}