CSS 3 filter (blur) not using transition duration

Question

I found this neat technique for cross-browser blurring. But it didn't look like the transition was having an effect, so I forked it and set the transition time and blur amount way up, and sure enough it's happening instantly.

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

Does transition: filter not work with blur for some reason?

Answer 1

Transition has been unprefixed, but filter has not, so the transition is over-riding the webkit-transition, but then doesn't know what to do with the unprefixed filter. This amendment works:

transition: 2s -webkit-filter linear;

Answer 2

Did you mean like this?

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;