Learn How the CSS @keyframes and animation Properties Work-1

HTML-CSS
1

What am I doing wrong on this challenge:

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

  #rect {
      #anim {
    animation-name: rainbow;
    animation-duration: 4s;
  }
  @keyframes:rainbow {
    0% {
      background-color: blue;

  }
    30%{
      background-color: green;
    }
    
    100% {
      background-color: yellow;
    }
}
    
    
  }
  
  
  
  
</style>
<div id="rect"></div>
2 
@keyframes:rainbow

That isn’t the syntax , look at the example.