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.