I got background color of yellow at 100%, but still having errors

HTML-CSS
1

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 rainbow {
   0% {
background-color: blue;
    }
 50%{
background-color:green;
 } 
 100%{
   bacground-color:yellow;
 } 
  }
  
  
  
</style>
<div id="rect"></div>

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 10323.67.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.209 Safari/537.36.

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

2

Hey @mathieu01,
You have a typo here.
Check the spelling of “background”.
Does that help?