我已经使用和在我的 svg 图像上创建了一个自定义PreLoader屏幕。animateTransformkeyframes
当我处理图像时，它们在所有浏览器上都运行良好。但是一旦我在我的PreLoader中使用它们，它们就会突然开始工作。
正如您可以在下面的代码段中检查它们的行为一样，它在Chrome中可以完美运行，但在Firefox和IE上它们甚至完全可见。
代码片段
//PreloadMe
$(window).on('load', function() { // makes sure the whole site is loaded
$('.la-anim-9').addClass('la-animate'); //to run the preloader lines animation
setTimeout(function() {
$('.preloader-logo img')
.fadeOut(400, function() {
$('.preloader-logo img').attr('src', 'http://gdurl.com/wzWh');
//to create the red logo effect
}).fadeIn(400);
}, 4500);
setTimeout(function() {
$('#preloader').fadeOut('slow'); // will fade out the white DIV that covers the website.
}, 6000);
setTimeout(function() {
$('body').css({
'overflow': 'visible'
});
//to revert back the normal scrolling
}, 6100);
});/* Preloader */
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffffff;
/* change if the mask should have another color then white */
z-index: 99;
/* makes sure it stays on top */
}
.la-anim-9 {
position: fixed;
z-index: -1;
width: calc(100% - 100px);
height: calc(100% - 100px);
border: 0px solid rgba(0, 0, 0, 0.1);
pointer-events: none;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
margin: 0 auto;
right: 0;
}
.preloader-logo {
opacity: 0;
position: absolute;
left: 0;
right: 0;
width: 366px;
height: 133px;
top: 50%;
margin: 0 auto;
display: block;
transform: translateY(-50%);
z-index: 10;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
-ms-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
.preloader-logo img {
max-width: 300px;
}
.la-anim-9.la-animate .preloader-logo {
opacity: 1;
}
.la-anim-9 .preloadline {
position: fixed;
background: #373737;
}
.la-anim-9 .preloadline-top,
.la-anim-9 .preloadline-bottom {
width: 0;
height: 2px;
}
.la-anim-9 .preloadline-left,
.la-anim-9 .preloadline-right {
width: 2px;
height: 0;
}
.la-anim-9 .preloadline-top {
top: 0;
left: 0;
}
.la-anim-9 .preloadline-right {
top: 0;
right: 0;
}
.la-anim-9 .preloadline-bottom {
right: 0;
bottom: 0;
}
.la-anim-9 .preloadline-left {
bottom: 0;
left: 0;
}
.la-anim-9.la-animate .preloadline-right {
height: 100%;
-webkit-transition: height 1.35s linear 0.3s;
transition: height 1.35s linear 0.3s;
}
.la-anim-9.la-animate .preloadline-bottom {
width: 100%;
-webkit-transition: width 1.35s linear 1.65s;
transition: width 1.35s linear 1.65s;
}
.la-anim-9.la-animate .preloadline-left {
height: 100%;
-webkit-transition: height 1.35s linear 3s;
transition: height 1.35s linear 3s;
}
.la-anim-9.la-animate .preloadline-top {
width: 100%;
-webkit-transition: width 1.35s linear 4.35s;
transition: width 1.35s linear 4.35s;
}
.la-anim-9.la-animate {
z-index: 100;
opacity: 0;
-webkit-transition: border 0.3s, opacity 0.3s 5.7s;
transition: border 0.3s, opacity 0.3s 5.7s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Preloader -->
<div id="preloader">
<div class="la-anim-9">
<div class="preloadline preloadline-top"></div>
<div class="preloadline preloadline-right"></div>
<div class="preloader-logo">
<img src="http://gdurl.com/5HVo" alt="Alt Text" />
</div>
<div class="preloadline preloadline-bottom"></div>
<div class="preloadline preloadline-left"></div>
</div>
</div>我已经尝试了几乎所有的东西，并为此挖掘了SO以及谷歌，但还没有找到适用于Firefox和IE的体面的解决方案。