web-dev-qa-db-ja.com

遷移期間を使用しないCSS 3フィルター（ぼかし）

ブラウザー間のぼかし処理に適したこの手法を見つけました。しかし、トランジションが効果を発揮しているようには見えなかったので、フォークしてトランジション時間とブラー量を設定し、すぐにそれが起こることを確認しました。

img.blur {
-webkit-filter: blur(30px); -moz-filter: blur(30px);
-o-filter: blur(30px); -ms-filter: blur(30px); 
filter: url(#blur); filter: blur(30px);  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
-webkit-transition: 2s -webkit-filter linear;
-moz-transition: 2s -moz-filter linear;
-o-transition: 2s -o-filter linear;
transition: 2s filter linear;
}

http://codepen.io/CSobol/pen/LGCiw

transition: filter何らかの理由でぼかしが機能しない？

css3blurcss-filters
20
Chris Sobolewski

遷移には接頭辞がありませんが、フィルターにはないため、遷移はwebkit-transitionをオーバーライドしますが、接頭辞のないフィルターの処理方法はわかりません。この修正は機能します：

移行：2s -webkit-filter linear;

32
Michael Mullany

あなたはこのような意味ですか？

transition: 1s filter linear;
-webkit-transition: 1s -webkit-filter linear;
-moz-transition: 1s -moz-filter linear;
-ms-transition: 1s -ms-filter linear;
-o-transition: 1s -o-filter linear;
19
J Haagsman