CSS 3 Filter (Unschärfe) nicht mit Übergangsdauer

Question

Ich fand diese saubere Technik für Cross-Browser-Unschärfe. Aber es sah nicht so aus, als hätte der Übergang einen Effekt, also habe ich gegabelt und die Übergangszeit und die Unschärfe so hoch gesetzt, dass es augenblicklich passiert.

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?

Answer 1

Der Übergang wurde nicht voreingestellt, aber Filter hat nicht, so dass der Übergang den Webkit-Übergang übersteuert, aber dann nicht weiß, was mit dem nicht angepassten Filter zu tun ist. Diese Änderung funktioniert:

übergang: 2s -webkit-filter linear;

Answer 2

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;