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

Question

我有这段 CSS(跨浏览器):

#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;
    }    
}

它可以跨浏览器工作(模糊除外...)。 但是，在 Google Chrome 中，图像会淡入，但不会同时去模糊。 如果我排除淡入，它将去模糊。

我该如何解决这个问题？

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);}
}

updated demo