title: css transition-delay not working in safari desktop and safari and chrome mobile
body: <p>So my animation is the following.</p>
  
  <p>Onclick show the menu and transition the element one by one with a small transition delay. You can see the behavior there www.evesaintjean.com (chrome or firefox desktop)</p>
  
  <p>However, on safari (desktop) or chrome/safari (mobile). The menu animation display instantaneously instead of showing the effect. I feel like I have all the necessity in place to make it work but it does not. I have look maybe questions but could not find an answer anywhere. Maybe it's something super simple. </p>
  
  <p>Here is the code : </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="menu-bars"&gt;
    &lt;span id="bar1" class="bars"&gt;&lt;/span&gt;
    &lt;span id="bar2" class="bars"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;ul id="SiteNav"&gt;
    &lt;li class=""&gt;
      &lt;a href="/pages/about" aria-has-popup="true" aria-expanded="false" id="menuItem"&gt;
        About
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=""&gt;
      &lt;a href="/pages/disonnances" aria-has-popup="true" aria-expanded="false" id="menuItem1"&gt;
        Disonnances
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=""&gt;
      &lt;a href="/pages/09-06-17" aria-has-popup="true" aria-expanded="false" id="menuItem2" &gt;
        09-06-17
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=""&gt;
      &lt;a href="/pages/projects-and-collabs" aria-has-popup="true" aria-expanded="false" id="menuItem3" &gt;
        Projects and Collabs
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=""&gt;
      &lt;a href="/collections/shop" aria-has-popup="true" aria-expanded="false" id="menuItem4" &gt;
        Shop
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=""&gt;
      &lt;a href="/pages/exhibitions-and-press" aria-has-popup="true" aria-expanded="false" id="menuItem5" &gt;
        Exhibitions and Press
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=""&gt;
      &lt;a href="/pages/contact" aria-has-popup="true" aria-expanded="false" id="menuItem6" &gt;
        Contact
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.display {
    visibility: visible !important;
  }
  
  #menuItem {
    opacity: 0;
    -o-transition: 0.4s ease-out;
    -moz-transition: 0.4s ease-out;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
  }
  
  #menuItem1 {
    opacity: 0;
    -o-transition: 0.4s ease-out;
    -moz-transition: 0.4s ease-out;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
    -o-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
  }
  #menuItem2 {
    opacity: 0;
    -o-transition: 0.4s ease-out;
    -moz-transition: 0.4s ease-out;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
    -o-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
  }
  #menuItem3 {
    opacity: 0;
    -o-transition: 0.4s ease-out;
    -moz-transition: 0.4s ease-out;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
    -o-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
  }
  #menuItem4 {
    opacity: 0;
    -o-transition: 0.4s ease-out;
    -moz-transition: 0.4s ease-out;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
    -o-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }
  #menuItem5 {
    opacity: 0;
    -o-transition: 0.4s ease-out;
    -moz-transition: 0.4s ease-out;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
    -o-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
  #menuItem6 {
    opacity: 0;
    -o-transition: 0.4s ease-out;
    -moz-transition: 0.4s ease-out;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
    -o-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }
  
  #menuItem:hover,#menuItem1:hover, #menuItem2:hover, #menuItem3:hover, #menuItem4:hover, #menuItem5:hover, #menuItem6:hover {
    -o-transform:translateX(10px);
    -moz-transform:translateX(10px);
    -webkit-transform:translateX(10px);
    transform:translateX(10px);
    -o-transition-delay: 0s !important;
    -moz-transition-delay: 0s !important;
    -webkit-transition-delay: 0s !important;
    transition-delay: 0s !important;
    color: black;
    text-decoration: none;
  }
  
  #menuItemindex:hover, #menuItem1index:hover, #menuItem2index:hover,#menuItem3index:hover,#menuItem4index:hover,#menuItem5index:hover,#menuItem6index:hover{
    -o-transform:translateX(10px);
    -moz-transform:translateX(10px);
    -webkit-transform:translateX(10px);
    transform:translateX(10px);
    -o-transition-delay: 0s !important;
    -moz-transition-delay: 0s !important;
    -webkit-transition-delay: 0s !important;
    transition-delay: 0s !important;
    color: black;
    text-decoration: none;
  }
  
  #menuItemindex, #menuItem1index, #menuItem2index,#menuItem3index,#menuItem4index,#menuItem5index,#menuItem6index {
    -o-transition: 0.6s ease-out;
    -moz-transition: 0.6s ease-out;
    -webkit-transition: 0.6s ease-out;
    transition: 0.6s;
  }
  
  
  #menuItem-mobile {
    opacity: 0;
    -o-transition: 0.4s ease-out;
    -moz-transition: 0.4s ease-out;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
  }
  
  #menuItem1-mobile {
    opacity: 0;
    -o-transition: 0.4s ease-out;
    -moz-transition: 0.4s ease-out;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
    -o-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
  }
  #menuItem2-mobile {
    opacity: 0;
    -o-transition: 0.4s ease-out;
    -moz-transition: 0.4s ease-out;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
    -o-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
  }
  #menuItem3-mobile {
    opacity: 0;
    -o-transition: 0.4s ease-out;
    -moz-transition: 0.4s ease-out;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
    -o-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
  }
  #menuItem4-mobile {
    opacity: 0;
    -o-transition: 0.4s ease-out;
    -moz-transition: 0.4s ease-out;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
    -o-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }
  #menuItem5-mobile {
    opacity: 0;
    -o-transition: 0.4s ease-out;
    -moz-transition: 0.4s ease-out;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
    -o-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
  #menuItem6-mobile {
    opacity: 0;
    -o-transition: 0.4s ease-out;
    -moz-transition: 0.4s ease-out;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
    -o-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }
  
  #menuItem-mobile:hover,#menuItem1-mobile:hover, #menuItem2-mobile:hover, #menuItem3-mobile:hover, #menuItem4-mobile:hover, #menuItem5-mobile:hover, #menuItem6-mobile:hover {
    -o-transform:translateX(10px);
    -moz-transform:translateX(10px);
    -webkit-transform:translateX(10px);
    transform:translateX(10px);
    -o-transition-delay: 0s !important;
    -moz-transition-delay: 0s !important;
    -webkit-transition-delay: 0s !important;
    transition-delay: 0s !important;
    color: black;
    text-decoration: none;
  }
  
  .show {
    opacity: 1 !important;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$( document ).ready(function() {
  
      $(".menu-bars").click(function(){
  
        $('#SiteNav').toggleClass("display");
        $("#bar1").toggleClass("rotatebar1");
        $("#bar2").toggleClass("rotatebar2");
        $("#menuItem").toggleClass("show");
        $("#menuItem1").toggleClass("show");
        $("#menuItem2").toggleClass("show");
        $("#menuItem3").toggleClass("show");
        $("#menuItem4").toggleClass("show");
        $("#menuItem5").toggleClass("show");
        $("#menuItem6").toggleClass("show");
  
        });
        $(".menu-bars-mobile").click(function(){
  
        $('#SiteNav-mobile').toggleClass("display");
        $("#bar1-mobile").toggleClass("rotatebar1");
        $("#bar2-mobile").toggleClass("rotatebar2");
        $("#menuItem-mobile").toggleClass("show");
        $("#menuItem1-mobile").toggleClass("show");
        $("#menuItem2-mobile").toggleClass("show");
        $("#menuItem3-mobile").toggleClass("show");
        $("#menuItem4-mobile").toggleClass("show");
        $("#menuItem5-mobile").toggleClass("show");
        $("#menuItem6-mobile").toggleClass("show");
  
        console.log('clicked');
  
  
        });
  </code></pre>
  
  <p>Thanks</p>