CSS-Opazität Übergang berücksichtigt Overlay-Opazität während der Animation nicht

Question

Ich habe ein Div, das ein einzelnes div, das als Überlagerung zusammen mit einem anderen div, das einige Bilder enthält, enthält. Das Overlay hat eine Deckkraft, so dass die Bilder sichtbar sind, aber Text kann immer noch gelesen werden.

Wenn ich jedoch die Deckkraft des Bildes animiere, ignoriert es das Overlay während der Animation, bis es fertig ist.

Er ist der Code:

HTML

<div class="container"> 
    <div class="overlay"></div> 
    <div class="image-container"> 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> 
    </div> 
</div> 

CSS

.container { 
    position: absolute; 
    top: 0; 
    z-index: 1; 
    height: 100%; 
    overflow: hidden; 
    background-color: yellow; 
} 

.overlay { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    opacity: 0.78; 
    background-color: rgb(245, 245, 245); 
} 

JavaScript

var image = document.getElementsByTagName("IMG")[0]; 
image.style.opacity = 0; 

setTimeout(function() { 
    image.style.transition = "opacity 3s linear"; 
    image.style.opacity = 1; 
}, 1000); 

Ich habe auch ein jsfiddle Beispiel:

https://jsfiddle.net/ygqov8t4/

Ich habe dies in Chrome, Firefox und Safari auf Mac getestet. Alle Browser haben das gleiche Verhalten, also ist das vielleicht Absicht?

Ich habe versucht, dies mit JavaScript zu tun, aber ich war nicht in der Lage, die Animation funktioniert, und ich bin besorgt über die Leistung, weil dies auf einer Menge (100+) Bilder ausgeführt werden soll.

image.onload = function() { 
    var self = this; 
    for (var i = 0; i < 1000; i++) { 
     setTimeout(function() { 
      self.style.opacity = i/1000; 
     }, i); 
    } 
} 

Answer 1

Versuchen das Overlay zwingt über dem Bild zu sein, indem seine z-index bis 1

.overlay { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    opacity: 0.78; 
    background-color: rgb(245, 245, 245); 
    z-index: 1; 
} 

https://jsfiddle.net/05pwwtm7/1/