5

画像を50％グレースケールフィルターからホバー時にフィルターなしの状態に移行しようとしています。

ただし、Firefoxではトランジションは機能しません。cssのみを使用してFirefoxでトランジションを実行することは可能ですか？

img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray alpha(opacity=50); /* IE6-9 */
    -webkit-filter: grayscale(50%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -moz-transition: all .6s ease; 
    -ms-transition: all .6s ease; 
    transition: all .6s ease;
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}
4

1 に答える 1

3

標準のフィルター構文はURLであるため、遷移には適していません。Geckoは、これが機能するために、作成中のFilterEffects仕様の短縮部分を実装する必要があります。

それまでの間、SVGアニメーションを使用してこれを行うことはできますが、CSSのみを介して行うことはできません。

于 2012-12-07T16:56:14.903 に答える