为什么这个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;
}