@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