css - css フィルターのアニメーション化可能なトランジション プロパティはありますか?

Question

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

例を次に示します: http://jsbin.com/onijim/3/

Answer 1

-webkit-transition : -webkit-filter 500ms linear

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

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

Answer 2

それが私が使っているものです。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;

Answer 3

接頭辞transitionなしをサポートする Chrome の最新バージョンでは、 (短縮形なし) を使用していて、まだ接頭辞が必要なプロパティを使用している場合は、接頭辞なしのコードと接頭辞付きのコードを混在させる必要があります。-webkit-transition-propertytransitionfilter-webkit-

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

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