Stuck on this for 3 hours. can you help?

Tell us what’s happening:

Your code so far

 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:

<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:

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

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

glad i could help. happy coding. cheers