배포 후 CSS3 애니메이션이 작동하지 않습니다.

Question

div에 클래스를 추가하고 실행하는 jquery가 있습니다. 이 클래스에는 애니메이션을 실행하는 스타일이 있습니다. 완벽하게 내 로컬 컴퓨터에서 Internet Explorer (Chrome에서는 좋지 않지만 종류는 좋음)를 사용하고 Firefox에서는 정상적으로 작동하지만 게시하면 Internet Explorer에서는 애니메이션이되지만 Chrome이나 Firefox에서는 애니메이션이 중단되지 않습니다. IE에서 개인 정보 및 보안 설정을 가능한 한 낮게 설정 했으므로 확실하지 않습니다.

누구나 알고 계신가요? CSS 애니메이션의 새로운 점은 아마도 가장 좋은 방법 일 것입니다. 양식을 "보내는"방식으로 애니메이션화하려고합니다. 내 주요 문제는 IE에서 실행되는 것이 아니라 게시 된 사이트에서만 실행된다는 것입니다. 두 번째 작은 문제는 크롬에서 다른 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 익스프레스)에서 잘 작동하지만 여기

내 마크 업입니다 내 컴퓨터에 로컬로 게시하더라도 IE11에서는 작동하지 않지만 다른 컴퓨터에서는 여전히 동일하게 작동합니다. 2. 모든 관련 파일 게시 된 것 같습니다. 누락 된 부분을 볼 수 없습니다.

로컬로 게시 된 버전을 실행하면 아약스가 작동하지만 애니메이션이 실행되지 않습니다. 그런 다음 다시 텍스트 영역을 클릭하면 fadeOut 및 slideDown이 표시되지만 애니메이션은 표시되지 않습니다. 아무 것도 클릭하지 않으면 아무 것도하지 않습니다.

아이디어가 있으십니까?

덕분에이 발견

Answer 1

는 (내가 MVC를 사용하고 있기 때문에) 내가 별도의 CSS에서 내 키 프레임을 넣고 상단에 넣어와 별도로 번들 http://www.markskowrondesign.com/blog/are-your-css3-animations-broken-in-ie10-and-ie11/

, 그것은 괜찮 았는데. 아직

크롬