非クロムブラウザのトランジション遅延プロパティ - ページ読み込みはCSSアニメーションに影響しますか？

Question

これは、この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)} 

上のメニュー項目のアニメーションを模倣する私の試みによるものであるJS

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

それはクロームではなく、ほとんどの正常に動作します他のブラウザ。ここで

は私がMDNページをチェックし

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

にJSを変更するが、それはまだFirefoxで動作しませんmy site.

です。また、サファリではtransition-delayの代わりにインラインスタイルがちょうどtransition:xxxmsになります。

質問＃1：サファリが私のJavaScriptによって追加されたスタイルを変更するのはなぜですか？

質問＃2：私は、このプロパティは「ワーキングドラフト」状態であることに気づいたが、なぜthe siteに私が真似しようとしていた、それはすべてのブラウザのために働いていますか？

=====================更新==================

私は」

HTMLの直後に上記のJSを実行しました。問題は解決しましたが、問題は解決しました。私はドキュメントの準備ができてからそれらを実行しようとしました。そして、アニメーションは、それ以上のベンダープレフィックスを追加することなく、すべての現代のブラウザで動作します。 ページの読み込みはCSSアニメーションに影響しますか？もしそうなら、それを回避する方法は？私のプロジェクトでは、ページ上に大きなサイズの写真があります。画像がロードされているときに、ネットワークが遅い人に空白のナビゲーションバーが表示されないようにしたいのですが、それはドキュメントの後にJSコードを入れたのです。準備ができていたが、うまくいかなかった。

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 - 他のブラウザのために...

のjsファイル内の同じ使用-moz-、-ms-、-O- ...