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
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.