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

Posted by mrx3
mrx3
8,742 Points

My @keyframes animation will not work in firefox for some reason. (Codepen included).

The title at the top of the page, "We have every resource you need" is supposed to spin around 6 times, and return to normal. This animation works in Chrome and Internet Explorer, but not Firefox. I've add the vendor prefix but, it still won't work. The -moz-keyframes start on line 67 and the properties and values begin on line 49. Can anyone help me to get this working in Firefox as well please? Thank you in advance for any help.

Codepen: http://codepen.io/mike316/pen/KwZbLe

1 Answer

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Just tested your pen in both Firefox and Safari.

Apparently, in Firefox, you have to define any elements you rotate as block, so you need to assign display: block to that element. In Safari, you have to vendor prefix not only your @keyframes rule, but also the transform properties.

I've forked and fixed your pen.

mrx3
mrx3
8,742 Points

What's up Ryan? Thank you for the comment and the help. I think maybe I got a bad book. I don't want to mention the name of the book because, the author is a teacher on teamtreehouse. I'm rather upset because I thought the book was really well written. You've corrected me twice so far. One for the float based layout I made based on the book I used, and now this one with the @keyfames rule. I also did try to use the Safari vendor prefix as well, just like the book used, and it wouldn't even highlight properly in Notepad+. I'm kind of upset now with this book. Thank you again for your help Ryan.

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Safari is my default browser, and so i quickly noticed that your pen wasn't working in it. I looked at your CSS and didn't see any -webkit- ones on the transform properties, and Safari needs a lot more prefixes than most other modern browsers do, so I made a wild guess and added the vendor prefix and it worked. Desktop Safari isn't used a whole lot though, so it doesn't get tested often. Quite a shame, as it's actually a very awesome browser.

Similar thing with the Firefox issue. My guess is that the issue isn't with your book, but rather a bug with Firefox, where any elements you want to transform have to be block. Again, I just took a shot in the dark and I turned out to be right.

When you work with CSS for a few years, you begin to understand a lot of its quirks (vendor prefixes are an especially easy one). And if something's not right, Google is only a few clicks away. :)