0

我在让这个动画在 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？

4

1 回答 1

0

我可以在....5 行或更少的时间内做到这一点！

$('.notification').css('top', '-60px').delay(1000).animate({
  top: '0px'
}, function(){
  $(this).delay(500).fadeTo(300, 0);   
});
于 2012-07-30T20:23:02.963 回答