8

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?

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Jefferson
  • 993
  • 2
  • 16
  • 35
  • whenever possible use a good IDE, solves most of the syntax error itself. Thanks – Ash Mar 13 '19 at 11:39

1 Answers1

16

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);}
Simon Arnold
  • 15,849
  • 7
  • 67
  • 85