title: CSS3 filter blur keyframe animation
body: <p>What I'm trying to accomplish is a short gaussian blur animation on an image hover. Somewhat like setting focus on a camera. (focused-blurred-focused).</p>
  <p>This is what I got so far:</p>
  <pre><code>@-webkit-keyframes image_blur {
      0% { -webkit-filter: blur(0px);}
      50%; { -webkit-filter: blur(5px);}
      100% { -webkit-filter: blur(0px);}
  }
  
  #image {
      width    : 290px;
      height   : 160px;
      background: url(images/test1.jpg);
  }
  
  #image:hover {
      -webkit-animation: image_blur 2s; 
  }
  </code></pre>
  <p>Which doesn't seem to be working. Any suggestions?</p>