Keyframes doesn't work

Tell us what’s happening:
I’m in the “Applied Visual Design: Learn How the CSS @keyframes and animation Properties WorkPassed”, the challenge and the code is right but i can’t see the animation. I use firefox dev edition browser.

Your code so far

div {
  height: 40px;
  width: 70%;
  background: black;
  margin: 50px auto;
  border-radius: 5px;

#rect {
  animation-name: rainbow;
  animation-duration: 4s;

  @keyframes rainbow {



<div id="rect"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0.

Challenge: Learn How the CSS @keyframes and animation Properties Work

Link to the challenge:

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

I don’t think your CSS is correct. You have embedded the @keyframes definition inside of the #rect rule. Moving it outside of that rule makes it work for me.

Yes, I realized that there was an error in my code, thanks