IE10 - загрузка страницы задерживается из-за анимации CSS

Question

Я создал анимацию, чтобы затемнить DIV, а затем уменьшить его размер до нуля (поскольку я не могу использовать display: none; в анимациях). Анимация отлично работает в Google Chrome и FireFox, но в Internet Explorer 10 страница перестает загружаться до завершения анимации. Поэтому обычно предполагается, что DIV появляется вместе со всем остальным во время загрузки страницы, затем после 3-секундной задержки он должен исчезнуть и сузиться, чтобы остальная часть страницы скользила вверх, заполняя пустое пространство. Тем не менее, в IE10 появляется DIV, но остальная часть содержимого ниже DIV не... просто пустое пространство. Через несколько секунд содержимое загружается так же, как DIV начинает исчезать.

Сначала я подумал, что 'animation-delay: 3s' тоже задерживает загрузку страницы, поэтому я попытался изменить свою анимацию, чтобы не использовать задержку, и вместо этого просто имел больше ключевых кадров, где не было изменений в DIV для первого 0-66%, затем 66-88, оно исчезнет, ​​а 88-100 уменьшится. Это не решило проблему, и эта новая анимация снова работала нормально в chrome/firefox, но та же проблема для IE10.

Ниже мой код. Я понимаю, что одним из решений было бы скрыть div, а затем при загрузке страницы я мог бы изменить CSS с помощью JavaScript, чтобы показать 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;
    }
}

Answer 1

Добавьте код ниже для IE в вашем классе.successFadeOut

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