Question

我正试图获得一个跨浏览器兼容的模糊动画效果，虽然我看起来很糟糕！

我使用以下内容：

.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');
    }
  }

现在必须指出一些事情。

前缀事情变得一团糟，实际上我不知道第一个@keyframes规则现在正在做什么！有人想告诉我哪些规则无关紧要或无用吗？
Chrome（以及整个@-webkit-keyframes规则）完美运行......古老，严谨，无微软的Chrome。我们从来没有怀疑它一秒钟！
Internet Explorer像往常一样玩愚蠢，表现得像从未听过CSS3这句话。我希望这可以早在IE8上工作，所以我不能责怪它，但我一直在测试IE10，我预计至少会看到某种反应。

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。

感谢任何帮助！

Answer 1

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

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

Firefox仅支持相应的SVG过滤器。

我没有听说过-o-filter或-ms-filter曾经工作过（虽然我已经在演示中看到过它们，这些都是为了面向未来）。

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

据我所知，我还没有办法让SVG过滤器等效于关键帧动画。

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

CSS3模糊动画

1 个答案: