title: Safari browser does not support transitions on pseudo elements?
body: <p>My css is here </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a id="hamburger" class="mm-fixed mm-slideout" href="#menu"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is a link to a working example <a href="http://mmenu.frebsite.nl/" rel="nofollow">http://mmenu.frebsite.nl/</a> test by clicking the hamburger icon - work in every browser except safari</p>
  
  <p>how can i make it work on Safari? </p>