IE10 -页面加载被CSS动画延迟
我创建了一个动画来淡出DIV，然后将其大小缩小到零(因为我不能在动画中使用display: none；)。动画在Google Chrome和FireFox中运行良好，但在Internet Explorer10中，页面似乎会在动画完成之前停止加载。因此，通常情况下，DIV应该在页面加载过程中与其他所有内容一起出现，然后在3秒的延迟之后，它应该淡出并缩小，以便页面的其余部分向上滑动以填充空白空间。然而，在IE10中，DIV会出现，但DIV下面的其余内容不会...只有空白处。几秒钟后，就在DIV开始淡出的时候加载内容。
一开始，我认为“动画延迟:3s”也会延迟页面的加载，所以我试着改变我的动画，不使用延迟，而只是有更多的关键帧，在前0-66%的DIV没有变化，然后66-88它会淡出，88-100它会缩小。这并没有解决这个问题，这个新的动画在chrome/firefox中工作得很好，但在IE10上也有同样的问题。
下面是我的代码。我知道一种解决方案是隐藏div，然后在页面加载时，我可以用JavaScript修改CSS以显示DIV，并添加带有动画的类……然而，我只想用CSS来解决这个问题，因为我正在开发的web应用程序中到处都使用了这个动画，所以如果我们使用javascript，它会增加任何使用动画的人的工作。
使用带有剃刀视图、.net 4.5和Bootstrap CSS的Asp.Net MVC4
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;
}
}回答 1
Stack Overflow用户
发布于 2013-11-14 15:26:27
在您的.successFadeOut类中为IE添加以下代码
-ms-animation-duration:1s;
animation-timing-function: linear;https://stackoverflow.com/questions/16591516
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号