title: Reverse opacity animation on mouse out after hover
body: <p>I'm wondering if it is possible to reverse a keyframes animation on mouse out after hover without using JavaScript (that's a requirement for a project I'm working on). I have tried animation-direction: alternate; and animation-direction: reverse on the original .molehill selector and on the .molehill:hover > img selector without any luck. See JSFiddle for current status, but essentially the mole is animated to come out of the molehill on hover. When you remove the mouse, he disappears, but I would rather have the animation reverse so it looks like he's slowly going back in.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="molehill"&gt;
      &lt;div&gt;
          &lt;img id="m1" src="http://uf.heatherlaude.com/img_directory/molehill-1.png" alt="mole"&gt;
      &lt;/div&gt;
  
      &lt;img id="m2" src="http://uf.heatherlaude.com/img_directory/molehill-2.png" alt="mole"&gt;
      &lt;img id="m3" src="http://uf.heatherlaude.com/img_directory/molehill-3.png" alt="mole"&gt;
      &lt;img id="m4" src="http://uf.heatherlaude.com/img_directory/molehill-4.png" alt="mole"&gt;
      &lt;img id="m5" src="http://uf.heatherlaude.com/img_directory/molehill-5.png" alt="mole"&gt;
      &lt;img id="m6" src="http://uf.heatherlaude.com/img_directory/molehill-6.png" alt="mole"&gt;
      &lt;img id="m7" src="http://uf.heatherlaude.com/img_directory/molehill-7.png" alt="mole"&gt;
      &lt;img id="m8" src="http://uf.heatherlaude.com/img_directory/molehill-8.png" alt="mole"&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.molehill {
      width: 359px;
      height:250px;
      position: relative;
  }
  
  .molehill &gt; img {
      transition: 1s;
  }
  
  #m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8 {
      position: absolute;
      width: 100%
      height: 100%;
  
  }
  
  #m2, #m3, #m4, #m5, #m6, #m7, #m8 {
      opacity: 0;
  }
  
  
  .molehill:hover &gt; img {
      animation-name: molehill_test;
      -webkit-animation-name: molehill_test;
      animation-duration: 3.25s;
      -webkit-animation-duration: 3.25s;
      animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
      animation-iteration-count: 1;
      -webkit-animation-iteration-count: 1;
  }
  
  #m2 {
      animation-delay:.25s;
      -webkit-animation-delay:.25s
  }
  #m3 {
      animation-delay:.75s;
      -webkit-animation-delay:.75s
  }
  #m4 {
      animation-delay:1.25s;
      -webkit-animation-delay:1.25s
  }
  
  #m5 {
      animation-delay:1.75s;
      -webkit-animation-delay:1.75s
  }
  #m6 {
      animation-delay:2.25s;
      -webkit-animation-delay:2.25s
  }
  #m7 {
      animation-delay:2.75s;
      -webkit-animation-delay:2.75s
  }
  
  #m8 {
      animation-delay:3.25s;
      -webkit-animation-delay:3.25s
  }
  
  
  @keyframes molehill_test {
      0% {
          opacity: 0;
      }
  
      50% {
          opacity: 1;
      }
  
      100% {
          opacity: 1;
      }
  }
  
  
  @-webkit-keyframes molehill_test {
      0% {
          opacity: 0;
      }
  
      50% {
          opacity: 1;
      }
  
      100% {
          opacity: 1;
      }
  }
  </code></pre>
  
  <p>Full code on JSFiddle:<br>
  <a href="https://jsfiddle.net/qmgy4133/" rel="nofollow noreferrer">https://jsfiddle.net/qmgy4133/</a></p>