У меня есть анимация ключевого кадра css, которую я хочу скрыть до начала анимации. Он отлично работает в Firefox (40.0.3), но в Internet Explorer 11 изображения остаются видимыми до тех пор, пока не начнется анимация.
Я следовал этим руководствам, предложениям https://graphicfusion.design/blog/design/creating-fancy-css3-fade-in-animations-on-page-load/ и этот Переход между изображениями с помощью CSS в цикле
Я упростил свой код, поместил его на один лист, связал бесплатные изображения и вставил три элемента 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>
Спасибо
