0

I'm having an issue getting this animation to work in IE9. https://c9.io/aaronkahlhamer/notification-bar/workspace/index.html

This -ms-animation: slideDown 2.5s 1.0s 1 ease forwards; is not working in IE9.

@-webkit-keyframes slideDown {
    0%, 100% { -webkit-transform: translateY(-60px); }
    10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(-60px); }
    10%, 90% { -moz-transform: translateY(0px); }
}
@-o-keyframes slideDown {
0%, 100% { -o-transform: translateY(-60px); }
    10%, 90% { -o-transform: translateY(0px); }
}
@-ms-keyframes slideDown {
    0%, 100% { -ms-transform: translateY(-60px); }
    10%, 90% { -ms-transform: translateY(0px); }
}

.notification {
    -webkit-transform: translateY(-60px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;

    -moz-transform:    translateY(-60px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;

    -o-transform:    translateY(-60px);
    -o-animation:    slideDown 2.5s 1.0s 1 ease forwards;

    -ms-transform:    translateY(-60px);
    -ms-animation:    slideDown 2.5s 1.0s 1 ease forwards;



    position:absolute;
    padding:7px 28px;
    background: rgb(253,243,214);
    font-size:14px;
    color:#6B644E;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin:20px 0 0 50%;
    text-align:center;
    white-space:nowrap;
    moz-box-shadow: 0px 0px 12px rgba(253,243,214,1.0);
    -webkit-box-shadow: 0px 0px 12px rgba(253,243,214,1.0);
box-shadow: 0px 0px 12px rgba(253,243,214,1.0);
    z-index:1;

}
.notification-draft-saved {left:-63px;}
.notification-draft-saved:after {content: "draft saved";}

If it's not possible with CSS, a fallback would be nice; maybe jQuery?

TylerH
  • 20,799
  • 66
  • 75
  • 101
  • you can't expect us to do the work for you. you have to try something if you have specific question then ask. – bobek Jul 30 '12 at 20:18
  • Isn't it free to ask questions and free to answer them? Anyways, everyone is welcome to use this notification. –  Jul 31 '12 at 01:03
  • You have to apply to the rules of the community. You have to show us an effort and that you actually tried something. You got lucky that someone actually answered it :) usually questions like this get flagged. – bobek Jul 31 '12 at 01:13

1 Answers1

0

I can do this in....5 lines or less!

$('.notification').css('top', '-60px').delay(1000).animate({
  top: '0px'
}, function(){
  $(this).delay(500).fadeTo(300, 0);   
});
Ohgodwhy
  • 49,779
  • 11
  • 80
  • 110
  • Thanks! I'll give it a try shortly. Although, (forgive me for being a newbie on stackoverflow), I might not have explained the situation clearly enough. This -ms-transform: translateY(-60px); works. It positions the div above the browser window so it's hidden. The problem is -ms-animation: slideDown 2.5s 1.0s 1 ease forwards; does not make it slide down. I'm looking for a sweet and small fallback just for that prefix...if that's even possible. –  Jul 31 '12 at 00:57
  • @Aaron Kahlhamer honestly, i just don't dig CSS3 animations enough to be able to help you out there. What's really going on is that you need to detect IE9 and deliver a script with that code there above. If you don't need the positioning of the element, then remove my `.css(...)` code above. This will give you the fix that you want. If the element is positioned (as I see it, -60px), then setting it to '0' (as I've done) will move it to the top of the `first parent container with a position: anything` – Ohgodwhy Jul 31 '12 at 01:41