Question

我试图在交叉浏览器模糊效果，但我的CSS似乎只有在我删除未加前缀的版本时才有效

我在Chrome上测试它

.blurin {
    -moz-animation: blurin 3s;
    -webkit-animation: blurin 3s;    
    animation: blurin 3s; /* remove this to work */
}

@-moz-keyframes blurin { 
 0%     { -moz-filter: blur(0px); }
 100%   { -moz-filter: blur(10px); }
}

@-webkit-keyframes blurin {
 0%     { -webkit-filter: blur(0px); }
 100%   { -webkit-filter: blur(10px); }
}

/* remove this to work */
@keyframes blurin { 
 0%     { filter: blur(0px); }
 100%   { filter: blur(10px); }
}

Answer 1

复制似乎仅影响SVG图像的问题。 JSfiddle

＆＃13;

.blurin {
  -moz-animation: blurin 3s;
  -webkit-animation: blurin 3s;
  animation: blurin 3s ease infinite;
  /* remove this to work */
}
@-moz-keyframes blurin {
  0% {
    -moz-filter: blur(0px);
  }
  100% {
    -moz-filter: blur(10px);
  }
}
@-webkit-keyframes blurin {
  0% {
    -webkit-filter: blur(0px);
  }
  100% {
    -webkit-filter: blur(10px);
  }
}
/* remove this to work 
@keyframes blurin { 
 0%     { filter: blur(0px); }
 100%   { filter: blur(10px); }
}

＆＃13;

<img class="blurin" src="http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg" alt="">

＆＃13;

由于SVG对象不支持filter属性，我怀疑filter属性覆盖-webkit-filter属性，因此这些图像类型失败/

这似乎是Chrome / Blink中的一个错误 - 请参阅此https://bugs.chromium.org/p/chromium/issues/detail?id=109224

只有当我删除未加固定时，css模糊才有效

1 个答案: