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

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

  #rect {
    animation-duration: 4s;
    animation-name: rainbow;}
   0% { background-color:blue; } 
   50% { background-color: green;}
   100% {background-color: yellow;}
<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:

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

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

i found that 2sec ago but thanks for your help