title: Element disappears before css animation is complete
body: <p>I am building an animated tooltip for a website that has a delayed start. After approx 2s, it animates into the screen from the top (opacity and position). It displays for about 5-8 seconds and then I have a jQuery function "setTimeout" to remove the element from the DOM.</p>
  
  <p>Code is below:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.tooltip { 
      position: absolute;
      background:gold;
      padding-bottom: 15px;
      right:20px;
      top: 40px;
      padding: 10px;
      border-radius: 5px;
      width: 220px;
      z-index: 200;
      opacity: 0;
      display: inline-block;
      animation: zippyTool 2s;
      animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
      animation-delay: 2s;
  }
  
  @keyframes zippyTool {
      0% { opacity: 0; top: -20px}
      100% { opacity: 1; top: 40px; }
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code> setTimeout(function() {
      $( ".tooltip" ).fadeOut( "slow" );
    }, 10000);
  </code></pre>
  
  <p>The problem is that the tooltip element seems to disappear the moment that the animation is complete. It's as if it reverts back to the original opacity definition for .tooltip that was listed in the css.</p>
  
  <p>I have made a fiddle of the behaviour here  <a href="https://jsfiddle.net/coolwebs/0kv3pe8z/1/" rel="nofollow">https://jsfiddle.net/coolwebs/0kv3pe8z/1/</a></p>
  
  <p>How do I stop the tooltip element disappearing the moment that the @keyframes css animation is complete?</p>