title: CSS3 Animate Out of :hover
body: <p>I'm setting up a simple animation that brings up a little additional information when you hover over an image. The jQuery backup part is written and works fine, though the issue I'm having trouble with is getting the CSS3 animation to go in reverse when the user hovers out.</p>
  
  <p>So when you hover in it works great, but as soon as you hover out the elements just disappear. What I'd like to know is if there's a way to get them to animate backwards when the mouse hovers elsewhere. Thanks a lot!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#recent-work div { position: relative; width: 300px; height: 168px; overflow: hidden; }
                  
                  #recent-work div:hover .recent-project-type {  
                      animation-name: showType;
                      animation-duration: .5s;
                      animation-timing-function: ease;
                      animation-delay: 0;
                      animation-iteration-count: 1;
                      animation-direction: normal;
                      animation-play-state: running;
                      -moz-animation-name: showType;
                      -moz-animation-duration: .5s;
                      -moz-animation-timing-function: ease;
                      -moz-animation-delay: 0;
                      -moz-animation-iteration-count: 1;
                      -moz-animation-direction: normal;
                      -moz-animation-play-state: running;
                      -webkit-animation-name: showType;
                      -webkit-animation-duration: .5s;
                      -webkit-animation-timing-function: ease;
                      -webkit-animation-delay: 0;
                      -webkit-animation-iteration-count: 1;
                      -webkit-animation-direction: normal;
                      -webkit-animation-play-state: running;
                      top: 0;
                  }
                  
                  #recent-work div:hover .recent-project-title {  
                      animation-name: showTitle;
                      animation-duration: .5s;
                      animation-timing-function: ease;
                      animation-delay: 0;
                      animation-iteration-count: 1;
                      animation-direction: normal;
                      animation-play-state: running;
                      -moz-animation-name: showTitle;
                      -moz-animation-duration: .5s;
                      -moz-animation-timing-function: ease;
                      -moz-animation-delay: 0;
                      -moz-animation-iteration-count: 1;
                      -moz-animation-direction: normal;
                      -moz-animation-play-state: running;
                      -webkit-animation-name: showTitle;
                      -webkit-animation-duration: .5s;
                      -webkit-animation-timing-function: ease;
                      -webkit-animation-delay: 0;
                      -webkit-animation-iteration-count: 1;
                      -webkit-animation-direction: normal;
                      -webkit-animation-play-state: running;
                      bottom: 0;
                  }
              
              .recent-project-title { position: absolute; left: 0; right: 0; bottom: -34px; padding: 8px 10px; background: rgba(0,0,0,.75); text-decoration: none; border: 0; font-size: 20px; font-weight: 400; color: #fff; }
                  .recent-project-title:hover { color: #ff9900; text-decoration: none; }
                  
              .recent-project-type { position: absolute; left: 0; top: -26px; padding: 4px 8px; font-size: 12px; font-weight: 600; background: #ff9900; text-transform: uppercase; color: #111; }
                  .recent-project-type:hover { color: #fff; text-decoration: none; }
  
  @keyframes showType {
      from { top: -26px; }
      to { top: 0; }
  }
  
  @-moz-keyframes showType {
      from { top: -26px; }
      to { top: 0; }
  }
  
  @-webkit-keyframes showType {
      from { top: -26px; }
      to { top: 0; }
  }
  
  @keyframes showTitle {
      from { bottom: -34px; }
      to { bottom: 0; }
  }
  
  @-moz-keyframes showTitle {
      from { bottom: -34px; }
      to { bottom: 0; }
  }
  
  @-webkit-keyframes showTitle {
      from { bottom: -34px; }
      to { bottom: 0; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row" id="recent-work"&gt;
              &lt;div class="span-one-third"&gt;
                  &lt;a href="#" class="recent-project-image"&gt;&lt;img src="http://dl.dropbox.com/u/1762184/recent-work01.png" width="300" height="168"&gt;&lt;/a&gt;
                  &lt;a href="#" class="recent-project-title"&gt;Philly&lt;/a&gt;
                  &lt;a href="#" class="recent-project-type"&gt;Video&lt;/a&gt;
              &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>