jquery - -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 模糊图像并制作 Sprite 。然后调整模糊的不透明度 图像。但我想看看如何使用浏览器的模糊过滤器来做到这一点。

Answer 1

好吧，看来 Chrome 不喜欢同时使用不透明度规则和过滤器。

感谢 reddit 的 /u/akaBruce带来this SO post引起我的注意。

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

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

然后使用完整的过滤器:

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

看起来很合理。

这是一个 forked codepen我在哪里解决了问题。现在我所要做的就是消除闪烁(帮助？)...