-webkit-animation/keyframes 不能很好地与 -webkit-filter blur 配合使用

Question

我正在尝试创建动画模糊效果。我想让背景图像慢慢变得模糊。我正在尝试使用@-webkit-keyframes 来实现这一点，但只有动画不透明度起作用。

这是一个现场示例：http://codepen.io/dylnclrk/pen/cvDfx

以及我在做什么的简要说明：

我的模糊混合：

@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 不喜欢同时使用不透明度规则和过滤器。

感谢 reddit 的 /u/akaBruce 让我注意到 this SO post。

看起来我想做的是采用如下所示的关键帧规则：

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

然后把它们装满filter:

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

看起来很合理。

这是我解决问题的forked codepen。现在我要做的就是消除闪烁（帮助？）...