为什么这个 CSS 动画不会滑出？

Question

向上和向上的动画有效，但我不明白为什么它不会向下和向外滑动？

不是向下滑动而是立即关闭。

此处演示：http://codepen.io/anon/pen/dYbaJB

JS:

$(function() {
  $("#btn").click(function () {
    if ($("#notification").hasClass("in")) {
      $("#notification")
        .removeClass("in")
        .addClass("out");
    } else {
      $("#notification")
        .removeClass("out")
        .addClass("in");
    }
  });
});

Answer 1

只需将您的 CSS 更改为：

#notification.out 
{
     -webkit-animation-name: slideOutDown;
     animation-name: slideOutDown;
     bottom: 20px;
}