web-dev-qa-db-ja.com

CSSフィルターのアニメーション可能な遷移プロパティはありますか？

CSSフィルターをアニメーション化しようとしていますが、正しい遷移プロパティに関する情報が見つかりません。彼らは何ですか？

以下に例を示します。 http://jsbin.com/onijim/3/

csscss-transitions
39
donleche
-webkit-transition : -webkit-filter 500ms linear

webkitで動作します。 FFまたはOperaでのフィルターサポートについて知りません。

私はあなたの質問を完全に理解しているかわかりません。

55
mddw

それが私が使っているものです。 Mozillaの場合、2番目は機能しますが、私のソースでは-moz-プレフィックスが付いているので、両方を保持しても問題はありません。

-webkit-transition: 1s -webkit-filter linear;
-moz-transition: 1s -moz-filter linear;
-moz-transition: 1s filter linear;
-ms-transition: 1s -ms-filter linear;
-o-transition: 1s -o-filter linear;
transition: 1s filter linear, 1s -webkit-filter linear;
23
Karl Adler

最後のバージョンのChromeは、-webkit-プレフィックスなしのtransitionをサポートします。transition-property（省略形transitionなし）と、まだ-webkit-プレフィックスを必要とするfilterなどのプロパティを使用している場合、プレフィックスなしのコードとプレフィックス付きのコードを混在させる必要があります：

transition-property: width, left, transform, box-shadow, filter, -webkit-filter;

filterプロパティは-webkit-filterで繰り返されることに注意してください。これは、Firefoxのようにプレフィックスを使用しないブラウザに必要です。Firefoxでは、-webkit-filterは無視されます。

3
AxeEffect