動畫的CSS過濾器標籤是不可靠的，在最好的，應該避免。有動畫SVG濾鏡，但這樣沒有恐懼的其他方式
在我開始，我想指出的代碼中的缺陷是不相關的解決方案，但希望你可以借鑑一下：
您已將SVG設置爲position: absolute;，並給它一個大小以便在其他內容上呈現。這對於::hover僞選擇器而言很混亂。在visibility: hidden;風格添加到SVG消除閃爍
現在到了解決方案。在HTML中有很多動畫元素的方法。最常見的是javascript/jQuery和CSS動畫/轉換。在幾乎所有情況下，CSS動畫和轉換應該足夠了，但是有一些CSS屬性不受支持，並且會立即改變而不是轉換。在這種情況下，幸運的是我們可以使用SVG動畫
SVG動畫允許我們更改SVG過濾器的屬性。在我們這樣做之前，我們應該簡化SVG過濾器的代碼，這樣我們就可以爲單個屬性設置動畫。
img {
-webkit-filter: url(#gray-filter);
filter: url(#gray-filter);
}
<svg style="position: absolute; width: 128px; height: 128px; visibility: hidden;">
<defs>
<filter id="gray-filter">
<feColorMatrix type="matrix" values="0 0 0 0.6 0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0 1 0"></feColorMatrix>
</filter>
</defs>
</svg>
<img src="http://iconshow.me/media/images/logo/brand-logo-icon/png/128/cocacola-128.png" />
如果你運行上面的代碼，你應該得到一個灰色顯示。我們通過使用顏色矩陣來創建它。我們根據像素的alpha屬性設置紅色，綠色和藍色組件。
現在，我們可以添加一個SVG動畫
$('#my-img').on('click',function(oEvent) {
$('#gray-filter-anim-in')[0].beginElement();
});
#my-img {
-webkit-filter: url(#gray-filter);
filter: url(#gray-filter);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg style="position: absolute; width: 128px; height: 128px; visibility: hidden;">
<defs>
<filter id="gray-filter">
<feColorMatrix type="matrix" values="0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 1 0">
<animate id="gray-filter-anim-in" attributeName="values" attributeType="XML" begin="indefinite" dur="2" end="indefinite" from="0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 1 0" to="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" fill="freeze" />
</feColorMatrix>
</filter>
</defs>
</svg>
<img id="my-img" src="http://iconshow.me/media/images/logo/brand-logo-icon/png/128/cocacola-128.png" />
的SVG動畫必須另一種定義（在這種情況下，我們希望動畫濾芯內部）中聲明。如果我們訪問動畫DOM對象，我們可以通過調用其beginElement方法觸發動畫它具有以下特性
attributeName = The property name on the filter that will be changing
attributeType = "XML"
begin = The time offset until the animation begins. Indefinite stops it from triggering automatically so we can trigger it
end = The time offset until the animation ends
dur = The time duration the animation will run for. Default unit is seconds
from = The value of the filter's property at the start of the animation
to = The value of the filter's property at the end of the animation
。要結束動畫，請調用endElement方法。通過設置fill="freeze"我們告訴動畫在持續時間結束時停止，而不是將過濾器恢復到其初始屬性。
以下是完整的代碼來實現動畫漸變和動畫淡出
var fFadeIn = function(oEvent) {
document.getElementById('gray-filter-anim-in').beginElement();
};
var fFadeOut = function(oEvent) {
document.getElementById('gray-filter-anim-out').beginElement();
};
$('#my-img').hover(fFadeIn,fFadeOut);
#my-img {
-webkit-filter: url(#gray-filter);
filter: url(#gray-filter);
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg style="position: absolute; width: 128px; height: 128px; visibility: hidden;">
<defs>
<filter id="gray-filter">
<feColorMatrix type="matrix" values="0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 1 0">
<animate id="gray-filter-anim-in" attributeName="values" attributeType="XML" begin="indefinite" dur="0.5" end="indefinite" to="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" fill="freeze" />
<animate id="gray-filter-anim-out" attributeName="values" attributeType="XML" begin="indefinite" dur="0.5" end="indefinite" to="0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 1 0" fill="freeze" />
</feColorMatrix>
</filter>
</defs>
</svg>
<img id="my-img" src="http://iconshow.me/media/images/logo/brand-logo-icon/png/128/cocacola-128.png" />
請注意：我刪除了從動畫的屬性和的endElement方法調用，這樣如果您在圖像淡出時將鼠標移出圖像，則不會跳躍。我還加了邊框的圖像，所以你可以看到，當您將鼠標放在它
我發現所有這些信息在博客帖子下面 https://satreth.blogspot.co.za/2013/01/animating-svg-filters.html
好運
過濾器是開或關。當它應用於這樣的HTML元素時，您無法將其中的部分動畫化。 –