Thought of a way to do a materialization effect with good performance. Fake it. If you set a low opacity on the blurred element (ie, put "opacity: 0.5" on the "

Thought of a way to do a materialization effect with good performance. Fake it. If you set a low opacity on the blurred element (ie, put "opacity: 0.5" on the ".glass::before", essentially mixing the blurred image with the sharp one beneath it), this actually looks like it's half as blurred as before. Opacity can be animated very cheaply, entirely on the GPU (source: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ http://www.html5rocks.com/en/tutorials/speed/high-performanc...), so if you animate this property from 1 to 0, you should a good materialization effect, without ever asking the CPU to recalculate the blur. I'm going to fork the codepen and try this, will report back... EDIT: see http://codepen.io/callumlocke/pen/EKuvs http://codepen.io/callumlocke/pen/EKuvs