加载页面时添加animate.css类

Question

我有一个全屏div（#loader），应使用animate.css效果将其删除。我在文本上使用了一些效果，效果很好。但是当页面完全加载后，我的全屏div不会bounceOutDown。我试图为此使用jQuery .addClass。这是我正在使用的代码（放在页脚中）

$(document).ready(function() {
  $('#loader').addClass('animated bounceOutDown');
});

#loader {
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loader">

  LOADING

</div>

看看我的jsfiddle。我究竟做错了什么？感谢您的建议！

Answer 1

已将动画和bounceDown类添加到#Loader元素中，但是由于您在css文件中使用animation属性，因此animated和bounceDown类中的代码将被覆盖并且不起作用。