-webkit-animation /關鍵幀與-webkit-濾鏡模糊效果不佳

Question

我試圖創建一個動畫模糊效果。我想讓背景圖像慢慢變得模糊。我試圖使用@-webkit-keyframes來實現這一點，但只有動畫不透明正在工作。

這裏有一個活樣本：http://codepen.io/dylnclrk/pen/cvDfx

和簡要說明我在做什麼：

我對模糊的mixin：

@mixin blur($radius) { 
    -webkit-filter: blur($radius); 
    -moz-filter: blur($radius); 
    -o-filter: blur($radius); 
    -ms-filter: blur($radius); 
    filter: blur($radius); 
} 

我的動畫關鍵幀：

@-webkit-keyframes image_blur { 
    0% { 
      @include blur(0px); 
      opacity: 1; 
     } 
    50% { 
      @include blur(0.2px); 
      opacity: 0.96; 
     } 
    100% { 
      @include blur(0.4px); 
      opacity: 0.92; 
     } 
} 

動畫：

.animated { 
    -webkit-animation: image_blur 1s; 
    -webkit-animation-fill-mode: forwards; 
} 

的Javascript：

$('.card').click(function() { 
      $('.letter__picture').toggleClass('animated') 
      $('.letter__text').toggleClass('visible', 1000); 
     }) 

編輯：我知道，只是模糊的Photoshop圖像，使一個精靈做到這一點的方法之一。然後調整圖像的模糊不透明度 圖像。但我想看看我可以如何使用瀏覽器的模糊過濾器來做到這一點。

Answer 1

好吧，看起來好像Chrome不喜歡同時擁有不透明規則和過濾器。

感謝交易的/u/akaBruce爲this SO post引起我的注意。

看起來像什麼，我想要做的就是採取看起來像這樣我的關鍵幀規則：

opacity: 0.92; 
-webkit-filter: blur(1px); 

而且帶着他們充滿filter：

-webkit-filter: opacity(92%) blur(1px); 

似乎相當合理。

這裏是forked codepen我解決了這個問題。現在我所要做的就是擺脫閃爍（幫助？）...