Question

我创建了一个动画来淡出DIV，然后缩小它的大小（因为我不能使用display：none;在动画中）。动画在Google Chrome和FireFox中运行良好，但在Internet Explorer 10中，页面似乎停止加载，直到动画完成。因此，通常DIV应该在页面加载期间与其他所有内容一起出现，然后在3秒延迟之后它应该淡出并缩小，以便页面的其余部分向上滑动以填充空白区域。但是，在IE10中，DIV会出现，但DIV下面的其他内容不会......只是空白空格。几秒钟后，内容会在DIV开始淡出时加载。

起初，我认为'动画延迟：3s'也会延迟加载页面，所以我尝试将动画更改为不使用延迟，而只是让更多的关键帧在DIV没有变化的情况下对于前0-66％，然后是66-88，它会淡出，88-100会缩小。这并没有解决问题，这个新动画在chrome / firefox中再次运行良好，但IE10也是如此。

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

将Asp.Net MVC 4与razor视图，.net 4.5和Bootstrap 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;
    }
}

Answer 1

在您的班级.successFadeOut

中添加以下IE代码

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

IE10 - CSS动画延迟页面加载

1 个答案: