title: CSS3 custom animation triggering after :hover
body: <p>I'm creating a series of "windows" or "doggie doors" that, when hovered on, seem to push back into the "window" just like a doggie door.</p>
  
  <p>I've been able to create a natural looking effect of the doggie door closing.  It swings back and forth a couple times and then rests back to its default position.</p>
  
  <p>My problem is that I haven't been able to figure out a way to trigger the swing when the hover is released.  I know its a logic issue because I've seen examples of it done <a href="http://jsfiddle.net/e4FMm/" rel="nofollow">here</a> and using keyframes [here][2].  I also know I could solve this with javascript but I'm sticking strictly to CSS for this site.</p>
  
  <p>UPDATE:</p>
  
  <p>Here is the working example. <a href="http://jsfiddle.net/e4FMm/" rel="nofollow">Fiddle</a></p>
  
  <p>Thank you Nobita!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="window"&gt;
      &lt;li&gt;
          &lt;figure class="door"&gt;
              &lt;img src="http://www.ta-sa.org/data/images/laughing_man_big_2.png" alt=""&gt;
          &lt;/figure&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
      list-style: none;
  
  
  
  }
  .door {
      width: 300px;
      height: 300px;
      margin: 0;
      position: relative;
      perspective:1000px;
      -webkit-perspective:1000px;
      /* Safari and Chrome */
  }
  .door img {
      background-color: #E8585A;
      width: 100%;
      display: block;
      position: relative;
      transform-origin: top;
      -ms-transform-origin: top;
      /* IE 9 */
      -webkit-transform-origin: top;
      /* Safari and Chrome */
      -moz-animation: swing 2s;
      -webkit-animation: swing 2s;
      animation: swing 2s;
      z-index: 10;
  }
  
  .door:hover img {
        transform-origin: top;
      -webkit-transform-origin: top;
      -webkit-transform: rotateX(-60deg);
      -webkit-transition: all .2s;
      background-color: #00a99d;
      -webkit-animation: swing;
      /* Safari and Chrome */
  }
  @-webkit-keyframes swing {
      0%, 20%, 40%, 60%, 80%, 100% {
          -webkit-transform-origin: top center;
      }
      0% {
          -webkit-transform: rotateX(-60deg);
      }
      20% {
          -webkit-transform: rotateX(-60deg);
      }
      40% {
          -webkit-transform: rotateX(25deg);
      }
      60% {
          -webkit-transform: rotateX(-20deg);
      }
      80% {
          -webkit-transform: rotateX(5deg);
      }
      100% {
          -webkit-transform: rotateX(0deg);
      }
  }
  </code></pre>