How does @keyframes uses the animation-name: rainbow; from the anim tag?

Tell us what’s happening:
The @keyframes rule should use the animation-name of rainbow
is the problem what else can i do to fix this

Your code so far


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

  #rect {
    animation-duration: 4s;
    animation-name: rainbow;}
  @keyframes{ 
   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:62.0) Gecko/20100101 Firefox/62.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work

The @keyframes keyword needs a name. In this case it should be named rainbow

@keyframes rainbow {
  0% {...}
  50% {...}
  100% {...}
}

thanks
i found that 2sec ago but thanks for your help