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! While you're at it, check out some resources Treehouse students have shared here.

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

CSS Unused CSS Stages CSS Animations Keyframe Rules and Animation Properties

Posted by jesse durett
jesse durett
Courses Plus Student 614 Points

Firefox Animation

I am wondering why transforms and animations in thbe codepen code they provide are not working in Firefox. I open the codepen link they provide next to the treehouse video and the transforms and animations are not working. If I open it in chrome it does work. Do i need to change something in order for it to work or is something wrong with Firefox. I am using the latest version of Firefox

1 Answer

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jesse,

The animation properties and the key frames have all the vendor prefixes and unprefixed properties. The problem is with the background color on the progress bar. Only the -webkit prefix was used for the gradients. So the progress bar does not have a background color in firefox and so you can't see it animating.

So you would have to put in the unprefixed versions of those gradients for browsers that don't use the webkit prefix.

jesse durett
jesse durett
Courses Plus Student 614 Points

Thank you , that did it.