Filtre CSS 3 (flou) n'utilisant pas la durée de transition

Question

J'ai trouvé cette technique intéressante pour le flou entre les navigateurs. Mais il ne semblait pas que la transition ait un effet, alors je l'ai fourché et j'ai réglé le temps de transition et la quantité de flou, et bien sûr, cela se produit instantanément.

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

Est-ce que transition: filter ne fonctionne pas avec le flou pour une raison quelconque?

Answer 1

La transition n'a pas été préfixée, mais pas le filtre, donc la transition remplace la transition webkit, mais ne sait pas quoi faire avec le filtre non préfixé. Cet amendement fonctionne:

transition: 2s -webkit-filter linear;

Answer 2

Voulez-vous dire comme ça?

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;