title: Using Animate.css to fade out then fade in
body: <p>I am attempting to fade out a heading then fade in a new heading using animate.css. Currently I am able to perform the fades but I need them to overlap in the same position. Any advice would be appreciated. Thanks in advance.</p>
  
  <pre><code>&lt;link href="animate.css" rel="stylesheet"&gt;
  &lt;style type="text/css"&gt;
      body {
          font-family: helvetica;
      }
      h1 {
          font-size: 20em;
          text-align: center;
      }
      .item {
          margin: 300px auto 0 auto;
          color: black;
          text-align: center;
          -webkit-animation-duration: 2s;
          /* -webkit-animation-delay: 2s; */
          /*-webkit-animation-iteration-count: 2;*/
      }
      .why {
          margin: 300px auto 0 auto;
          color: black;
          text-align: center;
          -webkit-animation-delay: 2s;
          -webkit-animation-duration: 2s;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="item animated fadeOut"&gt;&lt;h1&gt;Cities&lt;/h1&gt;&lt;/div&gt;
      &lt;div class="why animated fadeIn"&gt;&lt;h1&gt;WHY&lt;/h1&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;
  &lt;/script&gt;
  </code></pre>