I think there is an error with is code or something

Tell us what’s happening:

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{animation-name: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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

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

Link to the challenge:

need close this with a bracket and

@keyframes rainbow{
  0%
  {
      background-color:blue;
  }

  50%
  {
      background-color:green;
  }

  100%
  {
      background-color:yellow;
  }
}

like this

you dont need the animation-name
cleaned up the bracckets a bit