CSS：阴影过滤器的过渡答案

【问题标题】：CSS: Transition on shadow filterCSS：阴影过滤器的过渡
【发布时间】：2013-07-25 15:33:15
【问题描述】：

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

我在这里演示了这种效果： http://jsfiddle.net/dbananas/3pMS8/

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

推荐任何人来解决这个问题并使过渡平滑？

谢谢，分贝

【问题讨论】：

标签： css filter css-transitions

【解决方案1】：

我会检查这是否有效并在 Firefox 中发生。如果我不得不猜测，我会说这是 Webkit 中的错误（检查 Firefox 可以帮助确认它是浏览器错误而不是代码中的错误）。您可以在此处提交错误报告：https://bugs.webkit.org/

也就是说，为了解决它，您可能需要重新考虑如何解决您的问题。

例如，如果您正在为文本执行此操作，则可以使用 text-shadow 属性，该属性是可动画的。

如果它是一个实际的图像，您可以求助于制作一个“阴影图像”，您可以淡化不透明度（如果您在内容图像上使用它），或切换到（如果您正在交换背景图像)。

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

【讨论】：

感谢您的帮助，我在firefox中试过了，图像完全消失了。我想我将不得不采用旧方式（2张图片，并在这些图片之间逐渐消失，直到透明度支持最终进入浏览器......或者有没有人有更优雅的页面加载减少选项？
@user2238144 - 仅供参考，我找到了一个可能有用的教程。见编辑。

【解决方案2】：

这看起来确实像一个错误。看起来在动画进行时阴影半径的处理方式有所不同（并应用了加速过滤器）。我已将 Chrome 记录为 http://crbug.com/266957

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

【讨论】：

注意：从 Blink r155623 开始修复；应该会在 6-12 周内以 Chrome 稳定版发货。