Keyframes doesn't work

HTML-CSS
1

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


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

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

  @keyframes rainbow {
    0%{
      background-color:blue;
    }
    50%{
      background-color:green;
    }
    100%{
      background-color:yellow;
    }




  }

}




</style>
<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:
https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work

2

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.

3

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.

4

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