1

我正在尝试获得跨浏览器兼容的模糊动画效果，尽管我似乎失败了！

我正在使用以下内容：

.image-container img.animate-me {

       -webkit-animation: focus 4s;
       -moz-animation: focus 4s;
       -ms-animation: focus 4s;
       -o-animation: focus 4s;
       animation: focus 4s;

       -webkit-animation-fill-mode: forwards;
       -moz-animation-fill-mode: forwards;
       -ms-animation-fill-mode: forwards;
       -o-animation-fill-mode: forwards;
       animation-fill-mode: forwards;
}

@keyframes focus {
    from {
        filter: url('blur.svg#blur');
        filter: progid:DXImageTransform.Microsoft.blur(PixelRadius='10'); 
          filter: blur(10px);
          -o-filter: blur(10px);
          -ms-filter: blur(10px);         
    }
    to {
        filter: url('focus.svg#focus');
        filter: none;
        filter:progid:DXImageTransform.Microsoft.blur(PixelRadius='0'); 
          -o-filter: blur(0px);
          -ms-filter: blur(0px);          
    }
  }

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

@-moz-keyframes focus {
    from {
          filter: url('blur.svg#blur');
    }
    to {
          filter: url('focus.svg#focus');
    }
  }

现在有一些事情必须指出。

  1. 前缀的东西刚刚弄乱了，事实上我不知道第一个@keyframes 规则的一半现在在做什么！有人愿意告诉我哪些规则是不相关或无用的吗？

  2. Chrome（以及整个@-webkit-keyframes规则）完美运行……好老的、严肃的、无微软的 Chrome。我们从未怀疑过它！

  3. Internet Explorer 像往常一样装傻，表现得好像从来没有听说过 CSS3 这个词。我希望它可以追溯到 IE8，所以我不能责怪它，但我一直在 IE10 中进行测试，我希望至少会看到某种反应。

  4. filter: url('blur.svg#blur');如下：

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="10" />
</filter>
</svg>

当作为 CSS 规则添加时，这会使图像模糊，但在 @keyframe 动画中似乎没有任何作用。焦点版本将 stdDeviation 设置为 10。

任何帮助表示赞赏！

4

1 回答 1

1

总是把无前缀的版本放在最后！Firefox 支持不带前缀的关键帧，但会使用您最后编写的任何一个（在您的情况下，是带前缀的关键帧）。

WebKit 浏览器是目前唯一支持 CSS 过滤器（当然是前缀）的浏览器。

Firefox 仅支持 SVG 过滤器等效项。

我从未听说过-o-filter或-ms-filter从未工作过（尽管我在旨在面向未来的演示中看到了它们）。

旧的 IE 过滤器在 IE10 中不起作用。关键帧动画在其他版本的 IE 中不起作用，但在 IE10 中。因此，关键帧（仅 IE10 可识别）内的 IE 过滤器（仅 IE 10 以前的版本可识别，但 IE10 无法识别）是无用的。

就我玩过这个而言，我还没有找到一种方法让 SVG 过滤器等效项与关键帧动画一起工作。

所以据我所知，你只能在 WebKit 中制作这样的动画。

于 2013-03-20T17:43:39.907 回答