CSS3模糊动画

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

现在有许多事情必须指出。

1. 前缀事情变得一团糟，实际上我不知道第一个@keyframes规则的一半现在正在执行！ 有人愿意告诉我哪些规则无关或无用吗？

2. Chrome（以及整个@-webkit-keyframes规则）可以完美运行...旧的，毫不废话的，无Microsoft的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。

任何帮助表示赞赏！

Answer 1

始终将未加前缀的版本放在最后！ Firefox支持无前缀的关键帧，但是将使用您最后编写的那个（在您的情况下为前缀的关键帧）。

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

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

我还从未听说过-o-filter或-ms-filter正常工作（尽管我已经在演示中看到了它们的初衷是面向未来的）。

旧的IE过滤器在IE10中不起作用。 而且关键帧动画在IE10之外的其他版本的IE中均不起作用。 因此，关键帧（仅由IE10识别）中的IE过滤器（仅由早于10的IE版本识别，而不由IE10识别）是无用的。

就此而言，我还没有找到一种使SVG滤镜等效项与关键帧动画一起使用的方法。

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