IE9에서 애니메이션 문제. jquery 대체가 필요합니다.

Question

IE9에서 작동하도록이 애니메이션을 가져 오는 데 문제가 있습니다. https://c9.io/aaronkahlhamer/notification-bar/workspace/index.html

이 -ms-animation: slideDown 2.5s 1.0s 1 ease forwards;은 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";} 

CSS를 사용할 수없는 경우 폴백이 좋습니다. 어쩌면 jQuery?

Answer 1

나는 이것을 할 수 있습니다 .... 5 줄 이하!

$('.notification').css('top', '-60px').delay(1000).animate({ 
    top: '0px' 
}, function(){ 
    $(this).delay(500).fadeTo(300, 0); 
});