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;