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

IE9中的动画问题。需要一个jquery后备

1 个答案: