title: Auto fade out and fade In on hover animation
body: <h1>This is auto fade out after hover css animation</h1>
  <p>I'm trying to show a notification on video play button. The button click actually clicked for video play. I want to show a div with its content with the play icon. However, I would like to fade out the play icon, lets say after 5 seconds . I would like to achieve it using CSS. Below is my attempt. Please inform me if better solution here.</p>
  <h2>Here is the live <a href="https://codepen.io/mrana/pen/NWPamGL" rel="noreferrer">Demo</a></h2>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-size: 50%;
    font-style: Arial;
  }
  
  .animation-box {
    width: 75%;
    height: 27.5rem;
    background-color: blue;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }
  
  .animation-container {
    width: 1000rem;
    height: 30rem;
  }
  
  .first-text {
    font-size: 4rem;
    position: absolute;
    left: 2.5rem;
    top: 5rem;
    color: white;
      -webkit-animation: fadeOut 2s forwards;
      animation: fadeOut 2s forwards;
      -webkit-animation-delay: 5s;
      animation-delay: 5s;
  }
  
  .first-text:hover {
      -webkit-animation: fadeIn 0s forwards;
      animation: fadeIn 0s forwards;
      -webkit-animation-delay: 0.5s;
      animation-delay: 0.5s;
  }
  
  @-webkit-keyframes fadeIn {
      from {opacity: 0;}
      to {opacity: 1;}
  }
  
  @keyframes fadeIn {
      from {opacity: 0;}
      to {opacity: 1;}
  }
  
  @-webkit-keyframes fadeOut {
      from {opacity: 1;}
      to {opacity: 0;}
  }
  
  @keyframes fadeOut {
      from {opacity: 1;}
      to {opacity: 0;}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="animation-box"&gt;
      &lt;h1 class="first-text"&gt;This is auto fade out after hover &lt;/h1&gt;
    &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>