transition-delay property in non-chrome browser - does page loading have impact on CSS animations?

问题

This is due my attempt to imitate the menu item animation on this site

CSS

nav ul li{
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-transition-property:all !important ;
    transition-property:all !important ;
    -webkit-transition-duration: 800ms !important;
    transition-duration: 800ms !important;
    -webkit-transition-timing-function: cubic-bezier(0.515,.005,.515,1) !important;
    transition-timing-function: cubic-bezier(0.515,.005,.515,1) !important}
nav ul li.returned{-webkit-transform:translateY(0);transform:translateY(0)}

  var j = jQuery.noConflict();
  j('nav ul li').each(function(i){
      j(this).css({'transition-delay':i*150+'ms','-webkit-transition-delay':i*150+'ms'});
  });
  j('nav ul li').addClass('returned');

It works fine in chrome, but not in most other browsers.

Here is my site.

I checked the MDN page and change the JS to

  j('nav ul li').not("[class*='module']").each(function(i){
      j(this).css({'transition-delay':i*150+'ms','-webkit-transition-delay':i*150+'ms','-moz-transition-delay':i*150+'ms'});
  });

but it still doesn't work with firefox. Also, I find in safari, instead of transition-delay, the inline-style becomes just transition:xxxms.

Question #1:why is safari changing the style added by my javascript?

Question #2:I noticed that this property is in "working draft" status, but why on the site I was trying to imitate, it is working for all browsers?

=====================Update==================

I've fixed the problem, although Question #1 remains, and another question raises:

Previously I execute the above JS right after the <nav> HTML. I tried executing them after document is ready, and the animation works for every modern browser, without having to add any more vendor prefixes. So page loading does have an impact on CSS animations? If so, how to workaround it? In my project, I have pretty big size pictures on the page, I don't want people with slow network to see blank nav bar when the picture is being loaded, that was why I put the JS code after <nav> instead of after document is ready, but that didn't work.

回答1:

css

nav ul li{
-moz-transform: translateY(-40px); 
-o-transform: translateY(-40px); 
-ms-transform: translateY(-40px); 
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
-moz-transition-property:all !important ;
-ms-transition-property:all !important ;
-o-transition-property:all !important ;
-webkit-transition-property:all !important ;
transition-property:all !important ;
-moz-transition-duration: 800ms !important;
-ms-transition-duration: 800ms !important;
-o-transition-duration: 800ms !important;
-webkit-transition-duration: 800ms !important;
 transition-duration: 800ms !important;
-moz-transition-timing-function: cubic-bezier(0.515,.005,.515,1) !important;
-ms-transition-timing-function: cubic-bezier(0.515,.005,.515,1) !important;
-o-transition-timing-function: cubic-bezier(0.515,.005,.515,1) !important;
-webkit-transition-timing-function: cubic-bezier(0.515,.005,.515,1) !important;
transition-timing-function: cubic-bezier(0.515,.005,.515,1) !important
}



nav ul li.returned{
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
-o-transform:translateY(0);
-moz-transform:translateY(0);
transform:translateY(0)
}

-moz- , -ms- , -o- for other browsers ..

same use in js file -moz- , -ms- , -o- ...

来源：https://stackoverflow.com/questions/36530026/transition-delay-property-in-non-chrome-browser-does-page-loading-have-impact

标签

css

cross-browser

css-transitions