title: html css Gif Animation
body: <p>I have a .gif playing the animation once. It's doesn't loop and I don't want it to loop.</p>
  
  <p>I have 2 images, ("1 png" and "1 gif animated")</p>
  
  <p>I want that every time when the mouse is over the png image, the gif plays.</p>
  
  <p>My problem is that when I set my mouse positon over the png Image, the gif play one time and stop. When I move the mouse away and then move it back over the image, it doesn't play anymore.</p>
  
  <p>My CSS codes :</p>
  
  <pre><code>#icon{
   float: left;
   width:50px;
   height:50px;
   background: url("images/smal_icon.png") no-repeat scroll 0% 0% transparent;
  }
  #icon:hover{
  float: left;
  width:50px;
  height:50px;
  background: url("images/smal_icon.gif") no-repeat scroll 0% 0% transparent;
  }
  </code></pre>
  
  <p><code>#icon</code> is a DIV</p>