Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Firefox animates everything on load of the page. How to stop it from doing so ?


My page is using quite a bit of CSS3 animations and one section is hidden when the page is loaded and by clicking a navigation button it comes into view.

That certain section has a simple fade in effect on one of the paragraphs and a animated underline under the heading - everything comes to life when you click on that navigation bar to make that section visible again.

Everything works fine on Chrome and surprisingly on IE as well, but when it comes to Firefox, all the animations are being animated at one go when the main page loads.

So here's my question, how to stop it from doing so ? I can't use the animation delay property.


Grace Faires
Grace Faires
5,435 Points


If it's possible, please can you post your code? Makes it a little easier to workout where the problem is :)

Hey Grace,

The code is not necessary because it's not the codes fault, I was just curious if there was a way of stopping that silly Firefox from animating everything in the first instance of page load.

But I came out with a solution to that problem, I'll just make JavaScript sort it out for me by adding and removing classes from the paragraph and heading, hopefuly that should do the trick, otherwise I will have to feel sorry for the Firefox users. :)

I really appreciate for reaching out :)