CSS3模糊動畫

Question

我想獲得一個跨瀏覽器兼容的模糊動畫效果，雖然我似乎失敗慘了！

我使用了以下內容：

.image-container img.animate-me { 

     -webkit-animation: focus 4s; 
     -moz-animation: focus 4s; 
     -ms-animation: focus 4s; 
     -o-animation: focus 4s; 
     animation: focus 4s; 

     -webkit-animation-fill-mode: forwards; 
     -moz-animation-fill-mode: forwards; 
     -ms-animation-fill-mode: forwards; 
     -o-animation-fill-mode: forwards; 
     animation-fill-mode: forwards; 
} 

@keyframes focus { 
    from { 
     filter: url('blur.svg#blur'); 
     filter: progid:DXImageTransform.Microsoft.blur(PixelRadius='10'); 
      filter: blur(10px); 
      -o-filter: blur(10px); 
      -ms-filter: blur(10px);   
    } 
    to { 
     filter: url('focus.svg#focus'); 
     filter: none; 
     filter:progid:DXImageTransform.Microsoft.blur(PixelRadius='0'); 
      -o-filter: blur(0px); 
      -ms-filter: blur(0px);   
    } 
    } 

@-webkit-keyframes focus { 
    from { 
      -webkit-filter: blur(10px); 
    } 
    to { 
      -webkit-filter: blur(0px); 
    } 
    } 

@-moz-keyframes focus { 
    from { 
      filter: url('blur.svg#blur'); 
    } 
    to { 
      filter: url('focus.svg#focus'); 
    } 
    } 

現在有很多事情必須指出。

1. 前綴事情剛拿到雜亂，其實我不知道一半的第一@keyframes規則現在正在做！任何人都在意告訴我哪些規則不相關或無用？

2. Chrome瀏覽器（以及整個@-webkit-keyframes規則）完美地工作......良好的舊，沒有廢話，無微軟Chrome瀏覽器。我們從來沒有懷疑它一秒鐘！

3. Internet Explorer是一如既往的愚蠢和行爲像它從來沒有聽說過它的生活中的短語CSS3。我希望這樣的工作早在IE8中，所以我不能責怪它，但我一直在IE10中測試，我期望至少看到某種反應。

4. filter: url('blur.svg#blur');如下：

   <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
   <filter id="blur"> 
   <feGaussianBlur stdDeviation="10" /> 
   </filter> 
   </svg> 
   

當作爲CSS規則添加此模糊圖像，但似乎一個@keyframe動畫中什麼也不做。焦點版本將stdDeviation設置爲10.

任何幫助表示讚賞！

Answer 1

總是把最前面的版本！ Firefox支持無前綴的關鍵幀，但會使用上次編寫的任何一個（在您的情況中爲前綴關鍵幀）。

WebKit瀏覽器是目前唯一支持CSS過濾器（當然是前綴）的瀏覽器。

Firefox只支持SVG濾鏡等效。

我還沒有聽說過-o-filter或-ms-filter有史以來的工作（雖然我已經看到他們的演示是爲了面向未來）。

舊IE過濾器在IE10中不起作用。而關鍵幀動畫在其他IE版本，但IE10中無效。因此，在關鍵幀內（僅由IE10識別）的IE過濾器（僅由IE版本超過10，但不能由IE10識別）是無用的。

至於我玩過這個，我還沒有找到一種方法使SVG濾鏡等效工作與關鍵幀動畫。

所以據我所知，你只能在WebKit中製作這樣的動畫。