IE10 - 页面加载延迟CSS动画

我创建了一个动画淡出DIV，然后缩小到什么都没有（因为我不能使用display：none;在动画中）。 Google Chrome和FireFox中的动画效果很好，但在Internet Explorer 10中，该页面似乎停止加载，直到动画完成。所以通常情况下，DIV应该在页面加载期间与其他所有内容一起出现，然后在3秒延迟后，它应该淡出并缩小，以便页面的其余部分向上滑动以填充空白区域。但是，在IE10中，DIV出现了，但DIV下面的其余内容不会......只是空白空白。几秒钟后，内容随着DIV开始淡出而加载。起初，我认为'动画延迟：3s'延迟了加载页面，所以我试着改变我的动画不使用延迟，而是更多的关键帧没有改变第一个0-66％的DIV，然后66-88会淡出，88-100会缩小。这并没有解决这个问题，这个新的动画在Chrome/Firefox中再次正常工作，但IE10的问题相同。IE10 - 页面加载延迟CSS动画

以下是我的代码。我知道一个解决方案是隐藏div，然后在页面加载时，我可以用JavaScript修改CSS以显示DIV并添加带有动画的类...但是，我只想用CSS解决此问题，因为这个动画用在我正在开发的所有Web应用程序中，所以如果我们使用javascript，它会为使用动画的任何人添加工作。

使用Asp.Net MVC 4剃刀意见，.NET 4.5，并引导CSS

NOTE: I used Visual Studio w/ Web Essentials to copy vendor specifics, so all the vendor specific CSS has identical values for everything. 

.successFadeOut { 
    display: block !important; 
    animation: successFadeOutAnimation; 
    animation-duration: 1.5s; 
    animation-delay: 3s; 
    animation-fill-mode: forwards; 
} 

@keyframes successFadeOutAnimation { 
    0% { 
     opacity: 1; 
     height: auto; 
     padding-top: 8px; 
     padding-bottom: 8px; 
     margin-top: 0px; 
     margin-bottom: 20px; 
     line-height: 20px; 
    } 

    70% { 
     opacity: 0; 
     height: auto; 
     padding-top: 8px; 
     padding-bottom: 8px; 
     margin-top: 0px; 
     margin-bottom: 20px; 
     line-height: 20px; 
    } 

    100% { 
     opacity: 0; 
     height: 0px; 
     padding-top: 0px; 
     padding-bottom: 0px; 
     margin-top: 0px; 
     margin-bottom: 0px; 
     line-height: 0px; 
    } 
}

来源

2013-05-16 Grymlot

在你的类中添加以下代码IE .successFadeOut

-ms-animation-duration:1s; 
    animation-timing-function: linear;

来源

2013-11-14 07:26:27

IE10 - 页面加载延迟CSS动画

回答

相关问题