CSS3模糊动画

时间:2013-03-20 15:30:02

标签: css css3 animation cross-browser

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

我使用以下内容:

.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>
    
  5. 这会在添加为CSS规则时模糊图像,但在@keyframe动画中似乎无效。焦点版本将stdDeviation设置为10。

    感谢任何帮助!

1 个答案:

答案 0 :(得分:1)

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

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

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

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

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

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

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