IE11에서 CSS 애니메이션이 작동하지 않습니다.

Question

크롬에서는 작동하지만 IE에는 구문이 없어도 작동하는 애니메이션이 있습니다. 버튼을 클릭하면 숨겨진 div가 표시되고 (표시 : 차단) 화면에서 벗어난 상태로 슬라이드됩니다.

편집 : 아래 코드는 jsfiddle로 복사 할 때 작동하지만 내 사이트에서 작동하지 않습니다. http://www.fastfoodnutrition.org/test/

HTML

<ul id="menulist"> 
      <li> 
       <a title=" Restaurants" href="/restaurants.php">Restaurants</a> 
      </li> 
      <li> 
       <a title=" Calculator" href="/calculator.php">Nutrition Calculator</a> 
      </li> 

    </ul> 

JS

$(document).ready(function(){ 
    $("#menubutton").click(function(event){ 
     $("#menulist").css("display","block"); 
     $("#menulist").addClass("slidein"); 

    }); 
}); 

CSS

#menulist{ 
    width: 100%; 
    position: absolute; 
    z-index: 10; 
    top: 50px; 
    right: -160%; 
    float:none; 
    display:none; 
} 

.slidein{ 
    -webkit-animation: slidein .5s ease-in-out .2s 1 normal;  
    -webkit-animation-fill-mode: forwards; 

    animation: slidein 1s; 
    animation-fill-mode: forwards; 
} 
@-webkit-keyframes slidein { 
    0% {right: -160%;} 
    100% {right: 0;} 

} 
@keyframes slidein { 
    0% {right: -160%;} 
    100% {right: 0;} 

} 

Answer 1

jQuery를의 버전에 따라 사용중인이 솔루션 작품 : 여기에 라이브 그것의 URL입니다 IE11에서는 괜찮습니다. 클래스의 ID를 대체했습니다.

http://jsfiddle.net/1tcnz4j7/15/

<ul class="menulist"> 
     <li> 
      <a title=" Restaurants" href="/restaurants.php">Restaurants</a> 
     </li> 
     <li> 
      <a title=" Calculator" href="/calculator.php">Nutrition Calculator</a> 
     </li> 

</ul> 

<div class="menubutton">Button</div> 

$(document).on('click', '.menubutton', function(){ 
    var object = $('.menulist'); 
    var openData = 'slidein'; 
    $(object).css('display','block').addClass(openData); 
}); 

또한 변수로 DOM 요소를 넣어 것입니다. 그리고 이미 미끄러 졌는지 확인할 수도 있습니다.

Answer 2

이 경우에 해당하는지는 잘 모르겠지만 미디어 쿼리 내부에 있습니다. IE는이를 무시한 것 같아 @에서 @를 싫어합니다.