css - Safari浏览器不支持伪元素上的过渡吗？

我的CSS在这里

#hamburger {
  box-sizing: border-box;
  display: none;
  width: 60px;
  height: 50px;
  left: 0;
  margin: 0;
  z-index: 2;
}
#hamburger:before, #hamburger:after, #hamburger span {
  background: #fff;
  content: '';
  display: block;
  width: 30px;
  height: 3px;
  position: absolute;
  left: 15px;
}
#hamburger:before {
  top: 13px;
}
#hamburger span {
  top: 23px;
}
#hamburger:after {
  top: 33px;
}
#hamburger:before, #hamburger:after, #hamburger span {
  -webkit-transition: none 0.5s ease 0.5s;
  transition: none 0.5s ease 0.5s;
  -webkit-transition-property: transform, top, bottom, left, opacity;
  transition-property: transform, top, bottom, left, opacity;
}

/* Hamburger animation */
html.mm-opening #hamburger:before, html.mm-opening #hamburger:after {
  top: 23px;
}
html.mm-opening #hamburger span {
  opacity: 0;
}
html.mm-opening #hamburger:before {
  transform: rotate(45deg);
}
html.mm-opening #hamburger:after {
  transform: rotate(-45deg);
}

<a id="hamburger" class="mm-fixed mm-slideout" href="#menu"><span></span></a>

这是通过单击汉堡包图标链接到工作示例http://mmenu.frebsite.nl/测试的链接-在除Safari外的所有浏览器中均可使用

如何在Safari上运行？

最佳答案

 -webkit-transform: rotate(-45deg)

作为解决问题的方法。通过@ DomlThe-Bread