CODEWITHSUNDEEP
cssanimationsafarimobile-safarimobile-chrome
Jean-Philippe Lauzon
Jean-Philippe Lauzon

Reputation: 11

css transition-delay not working in safari desktop and safari and chrome mobile

So my animation is the following.

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)

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.

Here is the code :

HTML

<div class="menu-bars">
  <span id="bar1" class="bars"></span>
  <span id="bar2" class="bars"></span>
</div>

<ul id="SiteNav">
  <li class="">
    <a href="/pages/about" aria-has-popup="true" aria-expanded="false" id="menuItem">
      About
    </a>
  </li>
  <li class="">
    <a href="/pages/disonnances" aria-has-popup="true" aria-expanded="false" id="menuItem1">
      Disonnances
    </a>
  </li>
  <li class="">
    <a href="/pages/09-06-17" aria-has-popup="true" aria-expanded="false" id="menuItem2" >
      09-06-17
    </a>
  </li>
  <li class="">
    <a href="/pages/projects-and-collabs" aria-has-popup="true" aria-expanded="false" id="menuItem3" >
      Projects and Collabs
    </a>
  </li>
  <li class="">
    <a href="/collections/shop" aria-has-popup="true" aria-expanded="false" id="menuItem4" >
      Shop
    </a>
  </li>
  <li class="">
    <a href="/pages/exhibitions-and-press" aria-has-popup="true" aria-expanded="false" id="menuItem5" >
      Exhibitions and Press
    </a>
  </li>
  <li class="">
    <a href="/pages/contact" aria-has-popup="true" aria-expanded="false" id="menuItem6" >
      Contact
    </a>
  </li>
</ul>

CSS

.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;
}

JS

$( 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');


      });

Thanks

Upvotes: 1

Views: 1432

Answers (1)

Sukh_Bains
Sukh_Bains

Reputation: 116

I realised you have to use negative delay to make it work on iOS

#menuItem1 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}

A negative animation delay starts the animation immediately, as if that amount of time has already gone by. Thanks

Upvotes: 1

Related Questions