CSS：阴影过滤器上的过渡

所以我试图在png文件中的非矩形对象上投射一个透明的阴影。到目前为止，这是可行的，但当我尝试在图像上方添加过渡效果时，过滤器似乎会将其设置值最大化，然后在过渡功能的计时器启动时快速反弹到实际设置值。我运行的是Chrome 28 Mac，但也出现在Safari上

我在这里演示了这种效果：

建议谁来修复此问题并使过渡顺利

谢谢，

---

db

我会检查一下这在Firefox中是否有效。如果让我猜的话，我会说这是Webkit中的一个bug在Firefox中检查可以帮助确认这是一个浏览器bug，而不是代码中的bug。您可以在此处为其提交错误报告：

也就是说，为了解决这个问题，你可能必须重新考虑如何解决你的问题

例如，如果对文本执行此操作，则可以使用可设置动画的文本阴影属性

如果它是一个实际的图像，你可以求助于制作一个阴影图像，如果你在内容图像上使用它，你可以淡入阴影，或者如果你在交换背景图像，你可以切换到阴影

---

编辑我找到的，这可能对你有用。这是一种图像交叉淡入淡出效果，就像我之前建议的那样。它有几个不同的变体，包括一个纯CSS变体，因此您可以对其进行调整，使其适合您。基本上，您向img添加背景，然后淡入/淡出img元素本身以创建效果。我同意这并不理想——如果在浏览器中正常工作，webkit过滤技术可以说是优越的。

这看起来确实像一个bug。当动画正在进行且应用了加速过滤器时，阴影半径的处理方式似乎有所不同。我已将此记录为Chrome

---

作为一种解决方法，您可以将-webkit transform:translateZ0应用于带有阴影的元素，这将强制它始终加速。

感谢您的帮助，我已经在firefox中尝试过，图像完全消失。我想我将不得不让它成为旧的方式2图像，并在这些之间褪色，直到透明度支持使它最终进入浏览器。。或者有人有更优雅的、减少页面负载的选项吗？@user2238144-仅供参考，我发现了一个可能有用的教程。请参阅编辑。注意：从闪烁r155623起已修复；应在6-12周内以铬稳定装运。

transition: all 0.2s ease-in-out;
-webkit-filter: drop-shadow(0px 0px 13px rgba(0, 0, 0, 0.9));