Modal spielt keine Animation zweimal auf Firefox

Question

Ich habe ein Modal, um Bilder zu sehen, die die Animation nur das erste Mal auf Firefox spielt. Wenn ich es zum ersten Mal öffne, funktioniert es, aber wenn ich es zum zweiten Mal öffne, spielt es die Animation nicht ab. Es funktioniert auf Chrome tho.

HTML

<img src="https://s-media-cache-ak0.pinimg.com/236x/e8/2e/cc/e82ecc7ea98248bfa8161dcfcef2974a.jpg" id="postimage"></img> 

<div id="myModal" class="modal"> 
    <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span> 
    <img class="modal-content" id="modalImage"> 
</div> 

CSS

.modal { 
    display: none; 
    position: fixed; 
    z-index: 999999; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.8); 
} 
#postimage:hover { 
    opacity: 0.8; 
    cursor: pointer; 
} 

.modal-content { 
    display: block; 
    width: 100%; 
    margin: auto; 
    max-width: 720px; 
} 

@-webkit-keyframes fadeIn { 
    from {opacity:0.0} 
    to {opacity:1} 
} 

@keyframes fadeIn { 
    from {opacity:0.0} 
    to {opacity:1} 
} 

.modal-content { 
    -webkit-animation-name: fadeIn; 
    -webkit-animation-duration: 1.8s; 
    animation-name: fadeIn; 
    animation-duration: 1.8s; 
} 
.close { 
    position: absolute; 
    top: 50px; 
    right: 50px; 
    color: #e3e3e3; 
    font-size: 40px; 
    font-weight: bold; 
    transition: 0.3s; 
} 

.close:hover, 
.close:focus { 
    cursor: pointer; 
    color: #787878; 
} 

JS

var modal = document.getElementById('myModal'); 

var img = document.getElementById('postimage'); 
var modalImg = document.getElementById("modalImage"); 
img.onclick = function(){ 
    modal.style.display = "block"; 
    modalImg.src = this.src; 
} 

var span = document.getElementsByClassName("close")[0]; 

span.onclick = function() { 
    modal.style.display = "none"; 
} 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 

JSFIDDLE

Answer 1

Versuchen Zugabe:

@-moz-keyframes fadeIn { 
    from { 
    opacity: 0.0; 
    } 
    to { 
    opacity: 1; 
    } 
} 

und Aktualisierung der .modal-content mit:

-moz-animation-name: fadeIn; 
    -moz-animation-duration: 1.8s; 
    -moz-transition-timing-function: ease-in; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-fill-mode: both; 

-moz- speziell für Firefox ist wie -webkit- für Chrome oder Opera ist. Fand dieses auf here

transition-timing-function Effekte Beschleunigung der Animation so kann die Geschwindigkeit einstellen mit über verschiedene Dauer

animation-iteration-count ist die Anzahl der Male wird ein Animationszyklus dann

animation-fill-mode Effekte stoppen spielen, wie die Animation gilt Stile zum Ziel