Can I temporarily turn off all CSS3 transitions/animations whilst an element is built?

Question

I have created a rather complex Menu for a website. The menu lives from a huge amount of animation which is based on CSS3. However, when i navigate to a different page, the menu should build up initially - and without all the animations, but done JS-wise and not serverside.

Now i am wondering how i could completely disable all the transitions/animations temporarily, until the menu is built.

I thought about creating a subclass that overrides the animations but it does not seem to work, as it is always the animation/transition defined in the base class that is being used?

Answer 1

I’d suggest applying your animations/transitions via a class that’s added by JavaScript after the menu is built.

There is the animation-play-state property which can pause animations, but that only appeared (prefixed) in Safari 5 and Chrome 4 (as opposed to Safari 4 and Chrome 2 for the other animation properties), and I’m not sure if it’d work for your purposes.

Answer 2

You could set the transition-duration to 0s while building the menu and then set it back to the desired value afterwards.