css3 - animate - Filtro CSS 3(borroso) que no usa la duración de la transición

css effects animation

Question

Encontré esta técnica pulcra para el desenfoque entre navegadores. Pero no parecía que la transición estuviera teniendo un efecto, así que lo bifurqué y configuré el tiempo de transición y la cantidad de desenfoque, y estoy seguro de que está sucediendo al instante.

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 no funciona con desenfoque por alguna razón?

Answer 1

¿Te refieres a esto?

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;

Answer 2

La transición no se ha prefijado, pero el filtro no, por lo que la transición está sobrepasando la transición del webkit, pero luego no sabe qué hacer con el filtro sin prefijar. Esta enmienda funciona:

transición: 2s -webkit-filter linear;