CSS3 filter blur keyframe animation

animation, blur, css, filter, keyframe

Solution

Remove the ";" after "50%" in your `@-webkit-keyframes`. It will work.

0% { -webkit-filter: blur(0px);}
50%; { -webkit-filter: blur(5px);}
100% { -webkit-filter: blur(0px);}

Use this instead

0% { -webkit-filter: blur(0px);}
50% { -webkit-filter: blur(5px);}
100% { -webkit-filter: blur(0px);}

Problem

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). This is what I got so far: ``` @-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; } ``` Which doesn't seem to be working. Any suggestions?

Original source