CSS Animation not working smoothly Firefox - css

Question

I'm having problems with an animation: fadein property running smoothly on some text in Firefox.
Rather than fading in gradually like it goes in Chrome, it just seems to pop up and makes the whole thing look clunky. This also seems weird as the image has the same fadein instructions and fades in smoothly.
I've tried using the -moz prefix but this doesn't seem to help.
Here's my code below.Any suggestions?
.fixed-center {
position: fixed;
top: 50%;
left: 50%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.img-fade {
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
#-ms-keyframes fadein {
from {
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
h3 {
text-align: center;
font-size: 24px;
font-weight: normal;
font-style: italic;
opacity: 0.9;
filter: alpha(opacity=90);
text-decoration: underline;
text-decoration-color: white;
moz-text-decoration-color: white;
-webkit-animation: fadein 2s;
-webkit-animation-delay: 0.75s;
-webkit-animation-fill-mode: forwards;
;
-moz-animation: fadein 2s;
-moz-animation-delay: 0.75s;
-moz-animation-fill-mode: forwards;
-ms-animation: fadein 2s;
-ms-animation-delay: 0.75s;
-ms-animation-fill-mode: forwards;
;
-o-animation: fadein 2s;
-o-animation-delay: 0.75s;
-o-animation-fill-mode: forwards;
animation: fadein 2s;
animation-delay: 0.75s;
animation-fill-mode: forwards;
visibility: hidden;
}
<div class="fixed-center">
<p>
<a href="#" class="img-fade">
<img src="http://placehold.it/125x149" width="125" height="149" />
</a>
</p>
<h3><p>enter</p></h3>
</div>

Answer 1

just remove styling for H3 (or you can add center if you want) and do it like this:
https://jsfiddle.net/8z6sj6tr/1/
<div class="fixed-center">
<p>
<a href="#" class="img-fade">
<img src="http://placehold.it/125x149" width="125" height="149" />
</a>
</p>
<h3><p class="img-fade">enter</p></h3>
</div>