CSS 在 Firefox 中启动前隐藏关键帧动画，但在 Internet Explorer 中不

Question

我有一个 css 关键帧动画，我想在动画开始之前隐藏它。它在 Firefox (40.0.3) 中运行良好，但在 Internet Explorer 11 中，图片在动画开始之前一直可见。

我遵循了这些教程和建议 https://graphicfusion.design/blog/design/creating-fancy-css3-fade-in-animations-on-page-load/ 还有这个 Cross-Fade between images with CSS in loop

我简化了我的代码，将它们全部放在一个 sheet 中，链接在免版税图片中并放入三个 div 以显示我的困惑。

我是不是遗漏了什么明显的东西？

<!-- Internal style sheet -->

<html>
<head>

<style> 

/*************************************************/
.Angel03Pink img {
    position:absolute;
    left:0px;
    top:0;
    -webkit-animation-name: KEYFRAME_DIRECTIVE_whatItDoes;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 3s;
    animation-name: KEYFRAME_DIRECTIVE_whatItDoes;
    animation-iteration-count: infinite;
    animation-duration: 3s;
        max-width:100%;
    max-height:100%;
       <!--animation-direction: alternate;   /* does not seem to like anything that comes after this*/-->  
    border-style:solid; 
    border-color: #ff0000 #0000ff;
}



@-webkit-keyframes KEYFRAME_DIRECTIVE_whatItDoes {
    from {opacity: 0;}
    33% {opacity:0}
    66% {opacity: 1;}
    99% {opacity: 0;}
    to {opacity: 0;}
}
@keyframes KEYFRAME_DIRECTIVE_whatItDoes {
    from {opacity: 0;}
    33% {opacity:0}
    66% {opacity: 1;}
    99% {opacity: 0;}
    to {opacity: 0;}
}

#f1 {

}
#f2 {
     -moz-animation-delay: -1s          ; /* Firefox */
    -webkit-animation-delay: -1s         ; /* Safari and Chrome */
    -o-animation-delay: -1s                ; /* Opera */
    animation-delay: -1s                 ;

}
#f3 {
     -moz-animation-delay: -2s          ; /* Firefox */
    -webkit-animation-delay: -2s         ; /* Safari and Chrome */
    -o-animation-delay: -2s                ; /* Opera */
    animation-delay: -2s                 ;
}

/*************************************************/

    .FloatUP  {
    animation-delay: 4s;
    background-repeat: no-repeat;
    height: 500px;
    width: 250px;
    background-position: 100% 100%;
    background-size: 100% 100%;
    -webkit-animation-name: FloatUpDirective; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 12s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    animation-name: FloatUpDirective;
    animation-duration: 12s;
    animation-iteration-count: 1; /*-- can be infinite */
    border-style:none; 
    border-color: orange yellow;

    }


    /* Chrome, Safari, Opera */
    @-webkit-keyframes FloatUpDirective {
    0%{-webkit-opacity: 0; -moz-opacity: 0; opacity: 0;}
      1% { transform: translateY(300px); }
    100% { transform: translateY(0);}
    }
    /* Standard syntax */
    @keyframes FloatUpDirective { 
    0%{-webkit-opacity: 0; -moz-opacity: 0; opacity: 0;}
      1% { transform: translateY(300px); }
    100% { transform: translateY(0);}
    }   
/***********************************/
.common
{
width:100px;
height:100px;
/*background:red;*/

}


/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
opacity:0;  /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
        -webkit-animation-duration:1s;
        -moz-animation-duration:1s;
        animation-duration:1s;
}

.fade-in.CHANGEmeHOWEVERlong {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
animation-delay: 4s;


}


.WithbackGroundImage {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/%C5%81u%C5%BCna_cemetery_-_Guardian_angel.jpg/90px-%C5%81u%C5%BCna_cemetery_-_Guardian_angel.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-style:none; <-- can be border-style:solid-->
    }  

/**********************************/



</style>
</head>
<body>





<div class="fade-in CHANGEmeHOWEVERlong "> 
<div class="common FloatUP" id="four" style="
position:absolute;left:0px;top:0px;">
<div class="Angel03Pink" >
    <img id="f1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Schutzengel_Dorigo.jpg/84px-Schutzengel_Dorigo.jpg">
    <img id="f2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/%C5%81u%C5%BCna_cemetery_-_Guardian_angel.jpg/90px-%C5%81u%C5%BCna_cemetery_-_Guardian_angel.jpg">
    <img id="f3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/%C5%81u%C5%BCna_cemetery_-_Guardian_angel.jpg/90px-%C5%81u%C5%BCna_cemetery_-_Guardian_angel.jpg">
 </div>
four comes in after 4 seconds</div>
</div>


<div class="fade-in CHANGEmeHOWEVERlong">
<div class="common WithbackGroundImage FloatUP" id="four" style="
position:absolute;left:150px;top:0px;">four comes in after 4 seconds</div>
</div>


<div class="fade-in CHANGEmeHOWEVERlong">
<div class="common WithbackGroundImage" id="four" style="
position:absolute;left:300px;top:0px;">four comes in after 4 seconds</div></div>


<div class="common WithbackGroundImage" id="two" style="position:absolute;left:450px;top:0px;")>Div With backGroundImage</div><br>


</body> 
 </html>

谢谢

Answer 1

我只需要交换 div 以便他们阅读 { 我只需要交换 div 以便他们阅读

我在 [1]http://jsfiddle.net/melvinT/81y3vy9m/

上做了一个 js fiddle

CSS 在 Firefox 中启动前隐藏关键帧动画，但在 Internet Explorer 中不

CSS keyframe animation hiding before start in firefox but not in internet explorer

css

animation

delay

opacity

keyframe