2

我创建了一个动画来淡出 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 与剃须刀视图、.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;
    }
}
4

1 回答 1

0

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

    -ms-animation-duration:1s;
    animation-timing-function: linear;
于 2013-11-14T07:26:27.327 回答