Transition-Delay-Eigenschaft in nicht-Chrome-Browser - hat das Laden von Seiten Auswirkungen auf CSS-Animationen? Dieses

Question

ist durch meinen Versuch, den Menüpunkt Animation auf diesem 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'); 

Es funktioniert gut in Chrom zu imitieren, aber nicht in den meisten andere Browser.

Hier ist my site.

ich die MDN Seite überprüft und die JS zu

ändern

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

, aber es funktioniert immer noch nicht mit Firefox. Auch, ich finde in Safari statt transition-delay, wird der Inline-Stil nur transition:xxxms.

Frage # 1: Warum wird Safari den Stil von meinem Javascript hinzugefügt?

Frage # 2: bemerkte ich, dass diese Eigenschaft in „Arbeitsentwurf“ ist Status, aber warum auf the site ich zu imitieren versuchte, es für alle Browser funktioniert?

===================== aktualisieren ==================

I‘ Ich habe das Problem behoben, obwohl die Frage # 1 bleibt, und eine andere Frage wirft auf:

Zuvor führe ich den obigen JS direkt nach dem <nav> HTML. Ich habe versucht, sie auszuführen, nachdem das Dokument fertig ist, und die Animation funktioniert für jeden modernen Browser, ohne dass weitere Anbieterpräfixe hinzugefügt werden müssen. Das Laden von Seiten hat also Auswirkungen auf CSS-Animationen? Wenn ja, wie umgehen Sie das Problem? In meinem Projekt habe ich ziemlich große Größe Bilder auf der Seite, ich möchte nicht, dass Menschen mit langsamen Netzwerk zu sehen, leere Nav-Leiste, wenn das Bild geladen wird, deshalb legte ich den JS-Code nach <nav> statt nach dem Dokument ist fertig, aber das hat nicht funktioniert.

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- für anderen Browser ..

gleiche Verwendung in js Datei -moz-, -MS-, -o- ...