0

アニメーションのぼかし効果を作成しようとしています。背景画像がゆっくりとぼやけていきますように。これを達成するために使用しようとしています@-webkit-keyframesが、アニメーション化された不透明度のみが機能しています。

これがライブサンプルです: http://codepen.io/dylnclrk/pen/cvDfx

そして、私がやっていることの簡単な説明：

ぼかし用の私のミックスイン:

@mixin blur($radius) {
  -webkit-filter: blur($radius); 
  -moz-filter: blur($radius); 
  -o-filter: blur($radius);
  -ms-filter: blur($radius); 
  filter: blur($radius);
}

マイ アニメーションのキーフレーム:

@-webkit-keyframes image_blur {
    0% { 
          @include blur(0px);
          opacity: 1;
        }
    50% { 
          @include blur(0.2px);
          opacity: 0.96;
        }
   100% { 
          @include blur(0.4px);
          opacity: 0.92;
        }
}

アニメーション:

.animated {
  -webkit-animation: image_blur 1s; 
  -webkit-animation-fill-mode: forwards;
}

Javascript:

$('.card').click(function () {
            $('.letter__picture').toggleClass('animated')
            $('.letter__text').toggleClass('visible', 1000);
         })

編集: Photoshop で画像をぼかしてスプライトを作成するだけで、これを行う 1 つの方法を知っています。次に、ぼやけた画像の不透明度を調整します。しかし、ブラウザーのぼかしフィルターを使用してこれを行う方法を知りたいです。

4

1 に答える 1

1

Chrome は opacity ルールと filter の両方を一緒に使用することを好まないようです。

Reddit の/u/akaBruceに感謝します。

私がやりたいことは、次のようなキーフレーム ルールを使用することです。

opacity: 0.92;
-webkit-filter: blur(1px);

そして、それらをいっぱいにしてfilterください：

-webkit-filter: opacity(92%) blur(1px);

かなり合理的なようです。

これは、問題を修正したフォークされたコードペンです。今私がしなければならないのは、ちらつきを取り除くことです（助けて？）...

于 2013-10-19T06:15:11.737 に答える