1

私は惨めに失敗しているように見えますが、クロスブラウザ互換のぼかしアニメーション効果を得ようとしています!

私は以下を使用しています：

.image-container img.animate-me {

       -webkit-animation: focus 4s;
       -moz-animation: focus 4s;
       -ms-animation: focus 4s;
       -o-animation: focus 4s;
       animation: focus 4s;

       -webkit-animation-fill-mode: forwards;
       -moz-animation-fill-mode: forwards;
       -ms-animation-fill-mode: forwards;
       -o-animation-fill-mode: forwards;
       animation-fill-mode: forwards;
}

@keyframes focus {
    from {
        filter: url('blur.svg#blur');
        filter: progid:DXImageTransform.Microsoft.blur(PixelRadius='10'); 
          filter: blur(10px);
          -o-filter: blur(10px);
          -ms-filter: blur(10px);         
    }
    to {
        filter: url('focus.svg#focus');
        filter: none;
        filter:progid:DXImageTransform.Microsoft.blur(PixelRadius='0'); 
          -o-filter: blur(0px);
          -ms-filter: blur(0px);          
    }
  }

@-webkit-keyframes focus {
    from {
          -webkit-filter: blur(10px);
    }
    to {
          -webkit-filter: blur(0px);
    }
  }

@-moz-keyframes focus {
    from {
          filter: url('blur.svg#blur');
    }
    to {
          filter: url('focus.svg#focus');
    }
  }

今、指摘しなければならないことがたくさんあります。

  1. 接頭辞がごちゃごちゃになりました。実際、最初の @keyframes ルールの半分が今何をしているのかわかりません! どのルールが無関係または役に立たないか教えてくれる人はいますか?

  2. Chrome (および@-webkit-keyframesルール全体) は完全に機能します...古き良き、ナンセンスな、Microsoft のない Chrome。私たちはそれを一瞬たりとも疑いませんでした！

  3. Internet Explorer はいつものように愚かなふりをして、CSS3 という言葉を今まで一度も聞いたことがないように振る舞っています。私はこれが IE8 までさかのぼって動作することを望んでいるので、それを責めることはできませんが、IE10 でテストしており、少なくとも何らかの反応が見られることを期待していました.

  4. filter: url('blur.svg#blur');以下のとおりであります：

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="10" />
</filter>
</svg>

これは、CSS ルールとして追加されるとイメージをぼかしますが、@keyframe アニメーション内では何もしないように見えます。フォーカス バージョンは stdDeviation を 10 に設定します。

どんな助けでも大歓迎です！

4

1 に答える 1

1

常に接頭辞のないバージョンを最後に置いてください！Firefoxはプレフィックスなしのキーフレームをサポートしますが、最後に書き込んだもの（この場合はプレフィックス付きのキーフレーム）を使用します。

WebKitブラウザーは、現在CSSフィルターをサポートしている唯一のブラウザーです（もちろん、接頭辞が付いています）。

Firefoxは同等のSVGフィルターのみをサポートします。

私は聞いたことがない-o-filterか、これまでに機能していません-ms-filter（ただし、将来を見据えたデモでそれらを見たことがあります）。

古いIEフィルターはIE10では機能しません。また、キーフレームアニメーションは、IE10以外のバージョンのIEでは機能しません。そのため、キーフレーム（IE10でのみ認識される）内のIEフィルター（10より古いバージョンのIEでのみ認識され、IE10では認識されない）は役に立ちません。

これで遊んだ限り、SVGフィルターに相当するものをキーフレームアニメーションで機能させる方法は見つかりませんでした。

私の知る限り、このようなアニメーションはWebKitでしか機能しません。

于 2013-03-20T17:43:39.907 に答える