I have created a rather plex 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 pletely 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?

I have created a rather plex 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 pletely 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?

• javascript
• animation
• css
• transition

• Potentially relevant: stackoverflow./questions/11131875/… – Mark Amery Commented Mar 5, 2014 at 11:50

2 Answers 2

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.

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