部署后 CSS3 动画不起作用

Question

我有一些执行并将类添加到 div 的 jquery。此类具有运行动画的样式。 通过 IE 在我的本地计算机上完美运行（在 Chrome 上不是很好，但在某种程度上）并且在 Firefox 上很好，但是当我发布它时它会停止在 IE 中而不是 Chrome 或 Firefox 中的动画。我在 IE 中将我的隐私和安全设置设置为低至 poss，所以不确定它是什么。

任何人都知道为什么？对 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 的东西可以工作，但动画不会发生。如果我然后单击返回到 textarea，那么我会得到 fadeOut 和 slideDown 但不是动画。如果我不点击任何东西，那么它什么也不做。

有什么想法吗？

谢谢

Answer 1

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

当我将关键帧放在单独的 css 中并将它们放在顶部并单独捆绑它们时（因为我使用的是 MVC），它工作得很好。

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

干杯