CSS3模糊动画

我想获得一个跨浏览器兼容的模糊动画效果，虽然我似乎失败惨了！CSS3模糊动画

我使用了以下内容：

.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.

任何帮助表示赞赏！

来源

2013-03-20 Rick Donohoe

总是把最前面的版本！ Firefox支持无前缀的关键帧，但会使用上次编写的任何一个（在您的情况中为前缀关键帧）。

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

Firefox只支持SVG滤镜等效。

我还没有听说过-o-filter或-ms-filter有史以来的工作（虽然我已经看到他们的演示是为了面向未来）。

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

至于我玩过这个，我还没有找到一种方法使SVG滤镜等效工作与关键帧动画。

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

来源

2013-03-20 17:43:39 Ana

CSS3模糊动画

回答

相关问题