Filtro CSS 3 (sfocatura) che non utilizza la durata della transizione

Question

Ho trovato questa tecnica ordinata per la sfocatura cross-browser. Ma non sembrava che la transizione stia avendo un effetto, quindi l'ho biforcuta e ho impostato il tempo di transizione e la quantità di sfocatura verso l'alto, e sicuramente è successo all'istante.

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

Vuol transition: filter non funziona con sfocatura per qualche motivo?

Answer 1

La transizione è stata prefissata, ma il filtro non lo è, quindi la transizione sta superando la transizione del webkit, ma poi non sa cosa fare con il filtro non prefisso. La modifica funziona:

transizione: 2s -webkit-filter linear;

Answer 2

Intendevi questo?

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;