title: CSS3 animation when hover ends
body: <p>I have a div with some images in it. When I move the mouse over one of the images, I want it to grow, when I move the mouse out I want it to shrink again. I know that there isn't a mouseout ore something like that in CSS, so I put the reverse animation into the normal style of the images. Now my problem is, that when I load the site all images do the shrinking animation. </p>
  
  <p>Is there a way to do this only with CSS or do I have to use Javascript?</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="picmen"&gt;
      &lt;img src="/images/b1.png" /&gt;
      &lt;img src="/images/b2.png" /&gt;
      &lt;img src="/images/b3.png" /&gt;
      &lt;img src="/images/b4.png" /&gt;
      &lt;img src="/images/b5.png" /&gt;
      &lt;img src="/images/b6.png" /&gt;
      &lt;img src="/images/b7.png" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#picmen img {
      float: right;
      margin: 3px 1px 3px 1px;
      height: 50px;
      width: 50px;
      animation: shrink 0.5s;
  }
  
  @keyframes shrink {
      from{ width: 60px; height: 60px; }
      to{ width: 50px; height: 50px; }
  }
  
  #picmen img:hover {
      animation: grow 0.5s; 
      width: 60px;
      height: 60px;
  }
  
  @keyframes grow {
      from{ width: 50px; height: 50px; }
      to{ width: 60px; height: 60px; }
  }
  </code></pre>