Bộ lọc CSS 3 (làm mờ) không sử dụng thời lượng chuyển đổi

Question

Tôi đã tìm thấy kỹ thuật gọn gàng này để làm mờ trình duyệt chéo. Nhưng nó không giống như quá trình chuyển đổi có hiệu lực, vì vậy tôi chia nó và đặt thời gian chuyển tiếp và số lượng mờ lên, và chắc chắn nó đang xảy ra ngay lập tức.

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

Liệu transition: filter không làm việc với mờ vì một lý do?

Answer 1

Quá trình chuyển đổi đã không được cố định, nhưng bộ lọc không có, do đó quá trình chuyển đổi vượt quá quá trình chuyển đổi webkit, nhưng sau đó không biết phải làm gì với bộ lọc chưa được sửa đổi. Sửa đổi này hoạt động:

quá trình chuyển đổi: tuyến tính bộ lọc 2-webkit;

Answer 2

Ý bạn là như thế này?

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;