预呈现CSS过滤器转换？

是否可以从以下位置预渲染过渡：

filter:blur(10px) grayscale(100%) brightness(50%);

……为此：

filter:blur(0) grayscale(0) brightness(100%);

我希望平稳过渡，但现在FPS低得令人烦恼。请参见下面的示例，在整页模式下。（在全高清屏幕上使用NVIDIA GeForce GT 240M进行测试，因此您更快的GPU可能没有我的那么慢。）

div{
背景图像：url（'https://static.pexels.com/photos/1998/sea-landscape-mountains-nature.jpg');
背景尺寸：封面；
-webkit过滤器：模糊（10px）灰度（100%）亮度（50%）；
滤镜：模糊（10px）灰度（100%）亮度（50%）；
高度：1080px；
过渡：所有1；
宽度：1920像素；
将改变：过滤器；
}
div:悬停{
-webkit过滤器：模糊（0）灰度（0）亮度（100%）；
滤镜：模糊（0）灰度（0）亮度（100%）；
}

---

我怀疑这并没有什么好办法，因为浏览器的过滤器实现可能总是略有不同，而像

blur（）

这样的视觉效果很可能总是有问题的。也就是说，有一个名为

的CSS属性将更改

，它正是针对这种情况：

.my-element {
  will-change: filter;
}

将更改

属性本身不会触发预渲染，但它确实为支持此元素的浏览器提供了一个提示，即该元素的

过滤器

属性将在某个时候更改，并为它们提供时间进行优化。这通常会导致在支持浏览器的情况下创建新的硬件支持的渲染层，从而生成平滑的动画

---

到目前为止，支持还不是非常好，但仍然是：最新的Chrome和Opera（包括Android）以及最新的Firefox。WebKit已经实现，所以它可能会在下一次Safari中发布。对于其他人来说，注释中提到的

转换

-黑客通常具有类似的效果（因为它通过添加空3D转换触发硬件支持的渲染层），但您的里程可能会有所不同。

我知道我可以使用预渲染图像，但我需要一个仅CSS的解决方案，或者至少是完全客户端的。尝试添加此样式：

-webkit transform:translateZ（0）-moz变换：translateZ（0）-ms变换：translateZ（0）-o变换：translateZ（0）；变换：translateZ（0）我已经尝试过了，但不幸的是它没有帮助。will change属性很有用，但不幸的是在这种情况下它没有帮助。我已经用一个演示更新了这个问题，所以你可能会看到这个问题。（除非你的机器比我的快。）我的最终解决方案是一个简单的骗局：我在照片编辑器软件中制作了原始照片的模糊、变暗、灰度版本，我设置了不透明度动画，而不是过滤器。它工作得很好。尽管如此，我还是希望将来会有一个“客户端CSS过滤器转换预渲染器”，这样就有可能产生更壮观的效果。