geçiş geciktirme özelliği - sayfa yükleme CSS animasyonları üzerinde etkisi var mı?

Question

budur bu site

CSS üzerinde

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)} 

JS menü öğesi animasyon taklit benim girişimi nedeniyle

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

O çoğunda krom çalışıyor, ancak diğer tarayıcılar.

İşte

my site. Ben MDN sayfasını kontrol edilip

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'}); 
    }); 

için JS değiştirmek ama yine de firefox ile çalışmaz olduğunu. Ayrıca, transition-delay yerine safari'de, inline stili sadece transition:xxxms olur.

Soru # 1: Neden safari javascript'im tarafından eklenen stili değiştiriyor?

Soru 2: Bu özellik "taslağı çalışma" statüsünde olduğunu farkettim ama taklit etmeye çalışan neden the site üzerine, tüm tarayıcılar için çalışıyor?

===================== Güncelleme ==================

Ben ve sorunun # 1 kalmasına rağmen sorunu giderdi ve başka bir soru ortaya çıkıyor:

Önceden yukarıdaki JS'yi <nav> HTML'den hemen sonra çalıştırıyorum. Belge hazır olduktan sonra bunları çalıştırmayı denedim ve animasyon, daha fazla satıcı öneki eklemeden, her modern tarayıcı için çalışıyor. Yani sayfa yükleme CSS animasyonları üzerinde bir etkisi var? Eğer öyleyse, nasıl geçici bir çözüm? Projemde, sayfadaki oldukça büyük boyutlu resimlerim var, resim yüklendiğinde yavaş ağa sahip insanların boş gezinme çubuğunu görmesini istemiyorum, bu yüzden JS kodunu belge yerine <nav> yerine koydum Hazır, ama işe yaramadı.

Answer 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 diğer tarayıcılar için ..

js dosyasında

aynı kullanım -moz-, -ms-, -o ...