title: Zoom image with css3 animations
body: <p>i want so zoom a picture. Webkit works fine, but Firefox is not working. Did i misspell something? I can't find anything... </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Zoom Hover&lt;/title&gt;
          &lt;style type="text/css"&gt;
  
      @-moz-keyframes 'zoom' {
          0%{
              height:200px;
              width:200px;
              }
          100% {
                  width: 1000px;
                  height: 1000px;
              }
      }
  
      @-webkit-keyframes 'zoom' {
          0%{
              height:200px;
              width:200px;
              }
          100% {
                  width: 1000px;
                  height: 1000px;
              }
      }    
  
  img {
      width:200px;
      height:auto;
  
      }
  
  img:hover {
      -moz-animation-name: 'zoom' 2s;
  }
  img:hover {
      -webkit-animation: 'zoom' 2s;
  }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
          &lt;img src="http://www.maplehilltree.com/CHRIST_PUNCHERS_HOOO__6_.jpg"/&gt;
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>A demo you'll find here: <a href="http://jsfiddle.net/pDERw/" rel="nofollow">http://jsfiddle.net/pDERw/</a></p>