[英]Pre-rendering a CSS filter transition?
Is it possible to pre-render the transition from this: 是否可以由此预渲染过渡:
filter:blur(10px) grayscale(100%) brightness(50%);
...to this: ...对此:
filter:blur(0) grayscale(0) brightness(100%);
I want a smooth transition, but now the FPS is annoyingly low. 我想要一个平稳的过渡,但是现在FPS非常低。 See the example below, in full page mode .
请以全页模式查看以下示例。 (Tested using NVIDIA GeForce GT 240M on a Full HD screen, so your faster GPU might not be weak enough to be as slow as mine.)
(在全高清屏幕上使用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%); }
<div></div>
I suspect there's no golden bullet for this, as browsers will probably always have slightly differing implementations of filters, and visually heavy effects like blur()
will probably always be problematic. 我怀疑这没有万能的解决方法,因为浏览器可能始终会略有不同的过滤器实现,而像
blur()
这样的视觉效果可能总是有问题。 That said—there is a CSS property called will-change
that is for exactly this situation: 就是说-有一个CSS属性叫做
will-change
,它恰好适合这种情况:
.my-element {
will-change: filter;
}
The will-change
property does not trigger a prerendering per se, but it does give supporting browsers a heads-up that the filter
property of this element will change at some point, and gives them time to optimize. will-change
属性本身不会触发预渲染,但确实可以使支持的浏览器提前意识到该元素的filter
属性将在某个时候发生变化,并为它们提供了优化的时间。 This usually results in the creation of a new hardware-backed rendering layer in supporting browsers, and thus a smooth animation. 通常,这会在支持浏览器的过程中创建新的硬件支持的渲染层,从而实现平滑的动画。
Support is not super-great as of right now, but still: latest Chrome & Opera (including on Android) as well as latest Firefox. 到目前为止,支持还不够完善,但仍然支持:最新的Chrome和Opera(包括Android)以及最新的Firefox。 WebKit has implemented, so it will likely ship in the next Safari.
WebKit已实现,因此可能会在下一个Safari中发布。 For others, the
transform
-hack mentioned in the comments usually has a similar effect (as it triggers a hardware-backed rendering layer by adding a null 3D-transform), but your mileage may vary. 对于其他人,注释中提到的
transform
hack通常具有类似的效果(因为它通过添加空3D变换来触发硬件支持的渲染层),但是您的工作量可能会有所不同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.