0

我正在尝试创建动画模糊效果。我想让背景图像慢慢变得模糊。我试图用它@-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 模糊图像并制作精灵。然后调整模糊图像的不透明度。但我想看看如何使用浏览器的模糊过滤器做到这一点。

4

1 回答 1

1

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

感谢 reddit 的/u/akaBruce让我注意到这篇 SO 帖子。

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

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

并把它们装满filter：

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

看起来还挺合理的。

这是我解决问题的分叉代码笔。现在我所要做的就是摆脱闪烁（帮助？）......

于 2013-10-19T06:15:11.737 回答