部署后 CSS3 动画不工作

Question

我有一些 jquery 可以执行并将类添加到 div。此类具有运行动画的样式。通过 IE 在我的本地机器上完美运行(在 Chrome 上不是很好，但有点)，在 Firefox 上运行良好，但是当我发布它时，它在 IE 中停止动画，但在 Chrome 或 Firefox 中停止。我已将 IE 中的隐私和安全设置设置得尽可能低，所以不确定它是什么。

有人知道为什么吗？对 CSS 动画还很陌生 - 我可能没有以最好的方式做到这一点。我正在尝试以一种“发送”的方式为表单制作动画。我的主要问题是它不在 IE 中运行，而只在已发布的站点上运行。第二个较小的问题是它在 Chrome 上的工作不如在其他 2 个上好 - 我能做些什么来改变它？

这是我的标记:

<form id="emailForm" role="form">
<div id="emailDiv">
    <fieldset>
        <div class="form-group" id="fg1">
            <label for="emailSubject">Subject</label>
            <input id="emailSubject" placeholder="Enter Subject" class="form-control" />
        </div>
        <div class="form-group" id="fg2">
            <label for="emailMessage">Message</label>
            <textarea id="emailMessage" placeholder="Enter Message" class="form-control" rows="20"></textarea>
        </div>
    </fieldset>
<div class="form-group" id="fg3">
    <div class="col-md-offset-2 col-md-10">
        <input type="button" value="Send" id="emailSubmit" onclick="javascript: SendPlayerEmail();" class="btn btn-default" />
    </div>
</div>
</div>
</form>

<div id="emailSent" style="display:none">
    <span>Email sent :o)</span>
</div>

这是我的脚本:

<script type="text/javascript">
function EmailDto() {
    return {
        subject: $('#emailSubject').val(),
        body: $('#emailMessage').val()
    };
}


function SendPlayerEmail() {
    //debugger;
    var d = JSON.stringify(new EmailDto());
    var xhr = $.ajax({
        beforeSend: function (x, ss) {
            $('#emailSubmit').prop('disabled', true);
        },
        url: rootUrl + 'api/PlayerGame/SendEmail',// "/api/PlayerGame/GetGames",
        data:d,
        type: "POST",
        dataType:"json",
        contentType: "application/json; charset=utf-8",
    });
    $.when(xhr).done(function (data) {
        $('#emailDiv').one('animationend webkitAnimationEnd MSAnimationEnd', function (e) {
            HideEmail();
        })
        $('#emailDiv').addClass('sendEmail');
    });
    $.when(xhr).fail(function (response) {
        alert('There was a problem - sorry. Use the contact page.');
        alert(response.responseText);
        $('#emailSubmit').prop('disabled', false);
    })

}

function AfterEmailSend() {
    $('#emailDiv').fadeOut(function () {
        $('#emailSent').slideDown();
    });
}
function HideEmail() {
    //debugger;
    AfterEmailSend();
}


</script>

这是我的 CSS:

@-webkit-keyframes demo {
50% {

-webkit-transform:translate(50%,0) scale(0.7,0.7);
}

100% {

-webkit-transform:translate(60%,-100%) scale(0.5,0.5);
height:0;
    visibility:hidden;
}
}

@-moz-keyframes demo {
50% {
-moz-transform:translate(50%,0) scale(0.7,0.7);
}
100% {
-moz-transform:translate(60%,-100%) scale(0.5,0.5);
height:0;
    visibility:hidden;
}
}

@-ms-keyframes demo {
50% {
-ms-transform:translate(50%,0) scale(0.7,0.7);
}
100% {
-ms-transform:translate(60%,-100%) scale(0.5,0.5);
height:0;
    visibility:hidden;
}
}

@-o-keyframes demo {
50% {
-o-transform:translate(50%,0) scale(0.7,0.7);
}
100% {
-o-transform:translate(60%,-100%) scale(0.5,0.5);
height:0;
    visibility:hidden;
}
}

@keyframes demo {
50% {
-webkit-transform:translate(50%,0) scale(0.7,0.7);
-o-transform:translate(50%,0) scale(0.7,0.7);
-moz-transform:translate(50%,0) scale(0.7,0.7);
-ms-transform:translate(50%,0) scale(0.7,0.7);
transform:translate(50%,0) scale(0.7,0.7);
}
100% {
-webkit-transform:translate(60%,-100%) scale(0.5,0.5);
-o-transform:translate(60%,-100%) scale(0.5,0.5);
-moz-transform:translate(60%,-100%) scale(0.5,0.5);
-ms-transform:translate(60%,-100%) scale(0.5,0.5);
transform:translate(60%,-100%) scale(0.5,0.5);
height:0;
    /*visibility:hidden;*/
}
}

div.sendEmail {
-webkit-animation-name: demo;
-webkit-animation-duration: 900ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode:forwards;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-name: demo;
-ms-animation-duration: 900ms;
-ms-animation-iteration-count: 1;
-ms-animation-fill-mode:forwards;
-ms-animation-timing-function: ease-in-out;
-moz-animation-name: demo;
-moz-animation-duration: 900ms;
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode:forwards;
-moz-animation-timing-function: ease-in-out;
animation-name: demo;
animation-duration: 900ms;
animation-iteration-count: 1;
animation-fill-mode:forwards;
animation-timing-function: ease-in-out;
}    

在 VS2013 (IIS Express) 上工作正常，但是当发布时，即使在本地到我自己的机器上，它也不适用于 IE11 但对于其他 2 仍然工作相同。所有相关文件似乎都已发布 - 看不到缺少什么

当我运行本地发布的版本时，ajax 可以运行，但动画不会发生。如果我然后单击回到文本区域，那么我会得到 fadeOut 和 slideDown 但不是动画。如果我不点击任何东西，那么它什么也不会做。

有什么想法吗？

谢谢

Answer 1

找到这个:http://www.markskowrondesign.com/blog/are-your-css3-animations-broken-in-ie10-and-ie11/

当我将我的关键帧放在一个单独的 css 中并将它们放在顶部并单独捆绑它们时(因为我使用的是 MVC)，它工作正常。

仍然不知道为什么 Chrome 的渲染效果不如其他 2

干杯