CSS - 在淡入图像时去除图像模糊

Question

我有这个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;
    }    
}

它可以跨浏览器工作(除了模糊...).但是,在谷歌浏览器中,图像会淡入,但不会同时消除模糊.如果我排除淡入,它将会消除模糊.

我怎样才能解决这个问题？

Answer 1

你不需要jQuery.

设置这个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);}
}

它的工作原理(没有jQuery)

演示

对不起,我错过了关于不透明度的观点.

问题是Chrome在处理过滤器和不透明度方面存在问题.你应该完全采用过滤方式,并使用过滤器的不透明度:

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

更新的演示