Stuck on this for 3 hours. can you help?

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% {
   Bckground-color: green:
 }
 100% {
   background-color: yelow:
 }
}



</style>
<div id="rect"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36.

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

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

#2

there’s 3 problem in your code.
1.color i.e blue, green and yellow should ended with “;” instead of “:”
2.typo in background spelling which has green color
3. typo in yellow spelling at last

#3

I must be too tired to be doing this!
Thank you for pointing out my errors.
cheers, I passed it thanks to you

#4

glad i could help. happy coding. cheers

#5