CODEWITHSUNDEEP
javascriptjquerycssblur
Isaiah
Isaiah

Reputation: 1902

CSS - De-blur an image while fading it in

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?

Upvotes: 3

Views: 5242

Answers (1)

vals
vals

Reputation: 64164

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

Upvotes: 5

Related Questions