it-swarm.com.de

CSS 3-Filter (Unschärfe) verwendet keine Übergangsdauer

Ich fand diese nette Technik zum Verwischen zwischen Browsern. Aber es sah nicht so aus, als ob der Übergang einen Effekt hätte, also habe ich ihn gegabelt und die Übergangszeit und den Unschärfebetrag hochgesetzt und sicher ist, dass er sofort abläuft.

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

Hat transition: filter aus irgendeinem Grund nicht mit Unschärfe arbeiten?

20

Übergang wurde nicht vorfixiert, Filter jedoch nicht. Der Übergang setzt also den Webkit-Übergang außer Kraft, weiß dann aber nicht, was mit dem nicht vorfixierten Filter geschehen soll. Diese Änderung funktioniert:

übergang: 2s-Webkit-Filter linear;

32
Michael Mullany

Meinten Sie so?

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