firefox CSS 회색조 필터 전환

Question

내 웹 사이트의 이미지에 회색조 필터를 사용하고 있습니다. 마우스를 가져 가면 이미지가 0.3s로 희미 해지고 색이 바뀝니다. Firefox에서는 완벽하게 작동하지만 파이어 폭스에서는 작동하지 않습니다 ... 인터넷에서 솔루션을 찾고 있었지만 아무도 작동하지 않았습니다 ... 누구나 할 수있는 방법을 알고 있습니까? 파이어 폭스와 함께 새로운 CSS 솔루션이 있습니까?

여기 내 CSS입니다 :

.img { 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%); 
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%); 
filter: grayscale(100%); 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 4+ */ 
filter: gray; /* IE 6-9 */ 
-webkit-transition: all 0.6s ease-in-out; 
-moz-transition: all 0.6s ease-in-out; 
o-transition: all 0.6s ease-in-out; 
-ms-transition: all 0.6s ease-in-out; 
transition: all 0.6s ease-in-out; 
filter-transition: all 0.6s ease-in-out; 
} 

.img:hover{ 
-webkit-filter: none; 
-moz-filter:none; 
-ms-filter: none; 
-o-filter:none; 
filter: none; 
} 

하고 여기에 jsfiddle이다 : 당신의 도움에 대한

이 http://jsfiddle.net/25hrJ/

감사합니다!

Answer 1

Firefox가 배경 애니메이션을 제대로 지원하지 않는다고 생각합니다. 당신은 이미 JQuery와 함께 그것을 시도해보십시오. 애니메이션.

또 다른 (해킹 된) 해결책은 이미지 불투명도를 0 %로 사라지려고 시도하는 것입니다. 그게 효과가 있다면 당신은 그레이 스케일 이미지를 착색 된 이미지 앞에 놓고 그레이 스케일 이미지가 사라져서 착색 된 것을 트로프가되게 할 수 있습니다.