Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Design Web Typography Final Project: Create a Typographic Site Polishing Touches

@keyframes and from {}... Don't do what I did!

So, for the very last step (the fadein), I entered what I thought was supposed to go into the @keyframes query, only to find out my fadein animation didn't work! After a day of frustration and looking through the finished project file, going through my code and the finished code line by line I found the problem: when entering the from and to declaration blocks, I added a colon after the words from and to, for example:

@keyframes fadein {
  from: { opacity: 0; } 
  to:   { opacity: 1; }

AVOID THIS!!! It should be:

@keyframes fadein {
  from { opacity: 0; } 
  to   { opacity: 1; }

The from {} and to {} selectors don't use colons outside of the curly braces. I fell into the habit of adding colons in my nested syntax by default for everything. I hope this helps others trying to learn code, CSS, and typography

1 Answer

Steven Parker
Steven Parker
220,634 Points

Also note that when specifying property/value pairs, those do use colons but they don't use equal signs.

Thanks, Steven. Edited the post to correct this and make it easier to understand :)