Do css animations affect performance while invisible

Question

I'm using React with Material Ui, and encountered a case in which I render an indeterminate Progress Bar when loading a resource. While not showing the progress bar, it still takes up space via visibility: hidden css property.

In doing so, the progress bars' css animation also remains active, and while invisible, can still be viewed running with the element inspector.

To disable that, I've changed the mode of the progress bar to determinate(without an animation), like so:

<Fade in={visible}>
    <LinearProgress variant={visible ? 'indeterminate' : 'determinate'} /> 
</Fade>

My question is: How does an invisible css animation affect performance and repainting? Does disabling it matters?

EDIT: From what I checked, while it does not cause a repaint, the animation does still run and recalculates style and layout while hidden (at least in chrome and firefox).

Does this answer your question? [Performance differences between visibility:hidden and display:none](https://stackoverflow.com/questions/11757016/performance-differences-between-visibilityhidden-and-displaynone) — Simplicius, Aug 27 '20 at 12:49
I'm afraid not. I'm asking specifically about invisible animation performance — O. Aroesti, Aug 27 '20 at 13:14
I have never seen performance issues with css animations, but everything that is happening still is happening regardless of whether the user can see it. — Ivana Bakija, Aug 27 '20 at 13:41

score 1 · Accepted Answer · answered Sep 07 '20 at 12:33

1

From what I checked, while it does not cause a repaint, the animation does still run and recalculates style and layout while hidden.

Here is a screenshot of such a performance recording (in Chrome). Note that this

answered Sep 07 '20 at 12:33

O. Aroesti

1,016
11
32

Do css animations affect performance while invisible

1 Answers1