CSS - De-blur an image while fading it in

Question

I've got this piece of CSS (crossbrowser):

#theimg {
    filter: blur(0px);
    animation: fadein 6s ease 0 1;

    /* Safari and Chrome: */
    -webkit-filter: blur(0px); 
    -webkit-animation: fadein 6s ease 0 1;

}

@keyframes fadein { 
  from {
      -webkit-filter: blur(10px);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
    }
  to {
      -webkit-filter: blur(0px);
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
    }    
}

@-webkit-keyframes fadein { /* Safari and Chrome: */
  from {
      -webkit-filter: blur(10px);
  -khtml-opacity: 0;
  opacity: 0;
    }
  to {
      -webkit-filter: blur(0px);
  -khtml-opacity: 1;
  opacity: 1;
    }    
}

And it works cross browser (except the blur...). However, in Google Chrome, the image fades in, but doesn't de-blur at the same time. If I exclude the fading in, it will de-blur.

How can I fix this?

Answer 1

You don't need jQuery for this.

Set this CSS:

#theimg {
    -webkit-filter: blur(0px);
    -webkit-animation: fadein linear 3.5s;
}

@-webkit-keyframes fadein {
   0% {    -webkit-filter: blur(10px);}
  28% { -webkit-filter: blur(10px);}
 100% {  -webkit-filter: blur(0px);}
}

and it works (no jQuery)

demo

Sorry, I miss the point about the opacity.

The problem is that Chrome has problems handling filters and opacity at the same time. You should go fully the filter way, and use the opacity of the filter:

@-webkit-keyframes fadein {
   0% {    -webkit-filter: opacity(0%) blur(10px);}
  50% { -webkit-filter: opacity(100%)  blur(10px);}
 100% {  -webkit-filter: opacity(100%) blur(0px);}
}

updated demo