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的转换源。

菜单图标转换不适用于firefox

1 个答案: