CSS animations with hidden elements

May 13 2017

Today I learned that a CSS animation applied to an element hidden through visibility: hidden; occurs straight away. This behaviour is different to an element hidden through display: none as the animation doesn’t fire till it’s set back to display: block.

The demo below shows this in action - note how the square on the right appears part of the way through it’s animation sequence.

See the Pen Hidden versus none CSS animations by Damian Nicholson (@damian-1478604314) on CodePen.