CSS3 filter blur keyframe animation

css animation filter blur keyframe
Jefferson picture Jefferson · Mar 14, 2013 · Viewed 22.7k times · Source

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?

Answer

Simon Arnold picture Simon Arnold · Mar 14, 2013

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);}

Related questions

CSS3 Rotate Animation

<img class="image" src="" alt="" width="120" height="120"> Cannot get this animated image to work, it is supposed to do a 360 degrees rotation. I guess something's wrong with the CSS below, as it just stays still. .image { float: left; …

Read More
How to have multiple CSS transitions on an element?

It's a pretty straightforward question but I can't find very good documentation on the CSS transition properties. Here is the CSS snippet: .nav a { text-transform:uppercase; text-decoration:none; color:#d3d3d3; line-height:1.5 em; font-size:.8em; display:block; text-align:center; …

Read More
Animation CSS3: display + opacity

I have got a problem with a CSS3 animation. .child { opacity: 0; display: none; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .parent:hover .child { opacity: 0.9; display: block; } This code only works if I remove the change …

Read More