title: How to transition out?
body: <p>For the following code, the animation on hover works fine. Once I move away, it snaps back to the original size. How do I implement a transition on loss of focus so that there is animation into the div and out?</p>
  
  <pre><code>&lt;style&gt;
  .border {
    border:1px solid black;
    width:500px;
  }
  .changesize:hover{
      width:250px;
      transition-property: width;
      transition-duration: 1000ms;
      transition-timing-function: ease-in;
  }
  &lt;/style&gt;
  &lt;div class="border changesize"&gt;-- a div --&lt;/div&gt;
  </code></pre>
  
  <p><a href="http://scratchpad.io/caring-bead-826" rel="nofollow noreferrer">http://scratchpad.io/caring-bead-826</a></p>