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）

demo

对不起，我错过了关于不透明度的观点。

问题是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);}
}

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

1 个答案:

demo

updated demo