Pure CSS automatische Ausblendung funktioniert nicht auf Firefox

Question

Ich habe einen Übergang, der funktioniert, wie ich auf Chrom erwarte, aber es funktioniert überhaupt nicht auf Firefox.

Um ehrlich zu sein, ich denke, ich missverstand etwas und das funktioniert auf Chrom, weil irgendeine Art von Bug oder nicht erwartetes Verhalten.

Dies ist die CSS-Regel (basierend auf Bootstrap-3 Alarm-Klasse):

.alert { 
    transition: opacity 1s ease 5s; 
    -webkit-transition: opacity 1s ease 5s; 
    -moz-transition: opacity 1s ease 5s; 
    opacity: 0; 
} 

Was ich erwarte, ist, wenn die Seite geladen wird, ist die Warnung sichtbar, und nach dem angegebenen Timeout es ausblendet, die Genau das passiert auf chormes. Aber auf Firefox erscheint es direkt mit einer Opazität von 0, was das Gegenteil von dem ist, was ich will.

Vielen Dank im Voraus.

Answer 1

Sie brauchen etwas zum Übergang zu. Im Moment ist Ihr Anfangszustand (basierend auf dem von Ihnen freigegebenen Code) opacity:0;. Sie möchten, dass das Element beim Laden opacity:1; enthält und dann inopacity:0; übergeht.

Sie können dies tun, indem Sie nach 5 Sekunden eine Klasse mit JS hinzufügen, und diese neue Klasse hat opacity:0, aber dann verwenden Sie kein reines CSS.

Vielleicht wäre eine bessere Möglichkeit, eine CSS-Animation zu verwenden. Sie müssten die Art, wie Sie sich dem Problem nähern, ändern. Der reguläre CSS-Ladezustand wäre opacity:0;, aber Sie würden eine Opazität verwenden, um beim Laden die Opazität auf 1 zu ändern, dann warten Sie 5 Sekunden und blenden die Deckkraft auf 0. Die gesamte Animation würde 6 Sekunden dauern, und wenn Sie Prozentsätze verwenden würden, um das Timing Ihrer Animation festzulegen, möchten Sie die Ausblendung bei 83,33% (5/6 der Gesamtdauer) starten.

.alert { 
    -webkit-animation:fadeout 6s linear; 
      animation:fadeout 6s linear; 
    opacity:0; 
} 

@-webkit-keyframes fadeout{ 
    0%{opacity:1;} 
    83.33%{opacity:1;} 
    100%{opacity:0;} 
} 

@keyframes fadeout{ 
    0%{opacity:1;} 
    83.33%{opacity:1;} 
    100%{opacity:0;} 
}