I've got an animation that works in chrome but not IE even though I have the syntax for both present. What's happening hear is when you click a button, a hidden div becomes visible (display: block) and then slides in from off screen.

EDIT: The code below seems to work when I copy it into jsfiddle, but I can't get it to work on my site. Here's the url of it 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;}

}

```