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

Question

我在 codepen 上找到了这个动画。但出于任何原因，这在 Firefox

中不起作用

你可以在这里看到动画： http://codepen.io/awesomephant/pen/zxBKBe

css:

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);
  }
}

Answer 1

所以这应该适用于 Chrome 和 Firefox： http://codepen.io/anon/pen/KpBjPJ

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);
  }
}

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

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

menu icon transition wont work in firefox

html

css

jquery

css-animations