css3 - CSS Animation not working in IE11 -

css3 - CSS Animation not working in IE11 -

i've got animation works in chrome not ie though have syntax both present. what's happening hear when click button, hidden div becomes visible (display: block) , slides in off screen.

edit: code below seems work when re-create jsfiddle, can't work on site. here's url of live: 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;} }

depending on version of jquery you're using, solution works fine in ie11. have replaced ids classes well.

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); });

i set dom elements variables. , might want check if has slided too.

css css3 animation css-animations