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

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

Posted by Tracy Marshall
Tracy Marshall
4,580 Points

@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
231,269 Points
Steven Parker
Steven Parker
231,269 Points

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

Tracy Marshall
Tracy Marshall
4,580 Points

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