3

私はこの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 では、画像はフェード インしますが、同時にぼかしは解除されません。フェードインを除外すると、ぼやけが解消されます。

どうすればこれを修正できますか?

4

1 に答える 1

5

これには 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);}
}

更新されたデモ

于 2013-10-03T19:51:21.957 に答える