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规则)工作完美…老旧的、严肃的、没有微软的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中不能工作。所以关键帧内的IE过滤器(只能被IE10以上版本识别，但不能被IE10识别)是无用的。

到目前为止，我一直在玩这个，我还没有找到一种方法，使SVG过滤器等效与关键帧动画工作。

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