预渲染 CSS 过滤器过渡？答案

【问题标题】：Pre-rendering a CSS filter transition?预渲染 CSS 过滤器过渡？
【发布时间】：2016-01-09 11:53:56
【问题描述】：

是否可以从这里预渲染过渡：

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

...到这个：

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

我想要平滑过渡，但现在 FPS 低得令人讨厌。请参阅下面的示例，全页模式。（在全高清屏幕上使用 NVIDIA GeForce GT 240M 进行测试，因此您更快的 GPU 可能不会像我的那么慢。）

div {
  background-image: url('https://static.pexels.com/photos/1998/sea-landscape-mountains-nature.jpg');
  background-size: cover;
  -webkit-filter: blur(10px) grayscale(100%) brightness(50%);
  filter: blur(10px) grayscale(100%) brightness(50%);
  height: 1080px;
  transition: all 1s;
  width: 1920px;
  will-change: filter;
}
div:hover {
  -webkit-filter: blur(0) grayscale(0) brightness(100%);
  filter: blur(0) grayscale(0) brightness(100%);
}

&lt;div&gt;&lt;/div&gt;

【问题讨论】：

我知道我可以使用预渲染图像，但我需要一个纯 CSS 的解决方案，或者至少是完全客户端的解决方案。
尝试添加此样式：-webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0);
我试过了，可惜没用。

标签： css css-transitions css-filters

【解决方案1】：

我怀疑这没有万能的办法，因为浏览器的过滤器实现可能总是略有不同，而像blur() 这样的视觉上沉重的效果可能总是有问题的。也就是说，有一个名为 will-change 的 CSS 属性正是针对这种情况的：

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

will-change 属性本身不会触发预渲染，但它确实给支持浏览器一个提示，即该元素的filter 属性将在某个时候发生变化，并给他们时间进行优化。这通常会导致在支持的浏览器中创建一个新的硬件支持的渲染层，从而获得流畅的动画。

目前支持不是超级好，但仍然是：最新的 Chrome 和 Opera（包括 Android）以及最新的 Firefox。 WebKit 已经实现，所以它很可能会在下一个 Safari 中发布。对于其他人，cmets 中提到的transform-hack 通常具有类似的效果（因为它通过添加空 3D 变换来触发硬件支持的渲染层），但您的里程可能会有所不同。

【讨论】：

will-change 属性很有用，但不幸的是它在这种情况下没有帮助。我已经用演示更新了这个问题，所以你可能会看到这个问题。（除非你的机器比我的快。）我的最终解决方案是一个简单的作弊：我在照片编辑器软件中制作了原始照片的模糊、变暗、灰度版本，并且我用不透明度而不是滤镜制作动画。它完美地工作。尽管如此，我还是希望将来有一个“客户端 CSS 过滤器过渡预渲染器”，以便有更壮观的效果。