Фильтр 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 с размытием по какой-то причине?

Ответы

Ответ 1

Переход не был прерван, но фильтра нет, поэтому переход переместился через webkit-переход, но затем не знает, что делать с фильтром unprefixed. Эта поправка работает:

переход: 2s -webkit-filter linear;

Ответ 2

Вы имели в виду это?

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;