如何在 Firefox 中为模糊过滤器设置动画？答案

【问题标题】：How to animate blur filter in Firefox?如何在 Firefox 中为模糊过滤器设置动画？
【发布时间】：2013-02-02 21:24:58
【问题描述】：

@-webkit-keyframes myBlur{
   from{
      -webkit-filter:blur(0px);
   }
   to{
      -webkit-filter:blur(10px);
   }
}

似乎“模糊”在 Firefox 中没有实现，我们可以使用 svg 过滤器来代替。是否可以动画 svg 过滤器以实现与上述代码相同的效果？

【问题讨论】：

【解决方案1】：

ATM 你不能。

我一直尝试，但动画（如使用@keyframe 或通过过渡）不适用于 Aurora 构建。

敬请期待

【讨论】：

【解决方案2】：

我的 Firefox 在这里模糊了

SVG 模糊效果 .. 你可以试试 SVG 动画吗？

*-派克

【讨论】：

【解决方案3】：

尝试 Foggy，然后循环并更改 blurRadius 和 Opacity。

【讨论】：

【解决方案4】：

这是你要找的吗？

您正在使用适用于 webkit 浏览器的 webkit 前缀。我知道不久前 Mozilla 宣布他们将支持 webkit 前缀，但我不知道这是否是其中之一，因为它是实验性的。

// Browser Specific
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

【讨论】：