CODEWITHSUNDEEP
cssanimationcss-animations
user2874270
user2874270

Reputation: 1382

CSS Animation not working in IE11

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

}

Upvotes: 0

Views: 2827

Answers (2)

Ashley Andersen
Ashley Andersen

Reputation: 31

I don't know if this is the case for you, but I had mine inside a media query and IE seemed to ignore them, doesn't like the @ in an @ declaration.

Upvotes: 2

Ryan
Ryan

Reputation: 1

Depending on the version of jQuery you're using, this solution works fine in IE11. I have replaced your IDs for Classes as 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 would also put your DOM elements into variables. And you might also want to check if it has already slided too.

Upvotes: 0

Related Questions