Safari 浏览器不支持伪元素的过渡？

Question

我的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>

这是一个 link 工作示例 http://mmenu.frebsite.nl/ 通过单击汉堡包图标进行测试 - 在除 safari 之外的所有浏览器中工作

如何让它在 Safari 上运行？

Answer 1

 -webkit-transform: rotate(-45deg)

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

Safari 浏览器不支持伪元素的过渡？

Safari browser does not support transitions on pseudo elements?

css

safari

cross-browser

css-transitions