Question

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

以下是实时示例：http://codepen.io/dylnclrk/pen/cvDfx

简要说明我在做什么：

我的mixin for blur：

@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，我解决了这个问题。现在我所要做的就是摆脱闪烁（帮助？）......

-webkit-animation / keyframes与-webkit-filter blur不能很好地协同工作

1 个答案: