The Performance Of CSS Opacity

I was having dinner with +Paul Irish  last week when we decided to shoot an impromptu video about the performance of opacity in CSS (as one does).

Paul Irish: The Performance Of CSS Opacity

The sound might be a little hard to hear, so here's my low-budget caption:

"Opacity is one of the few CSS properties that can be properly accelerated. 3D transforms are all accelerated and 2D is typically accelerated (some people use the "null" transform trick there), but opacity is accelerated by default because the GPU can manipulate opacity as easily as scale and transform on the layer.

Basically, any layer where you want to fade the opacity over a CSS transition or animation, the browser is actually smart enough to throw it onto the GPU and do the manipulation over there and it's going to be fast as shit.

Of all CSS things, opacity is one of the most performant and you're not going to have problems using it. Anyone that tells you otherwise is just..wrong."

There's one more "dinner with Paul Irish" video coming up next week for those who were asking.
Shared publiclyView activity