Why isn't it not working? 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% {
background-color: green;
100% {
background-color: yellow;

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

Your browser information:

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

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

Link to the challenge:

you close #rect in a wrong way you used { instead of }

I fixed the #rect i put { } and it is still not working. Some one please help me please

Apart from the #rect that’s not correctly closed, you forgot to close the @keyframes as you finished it with a single “}” (which is for the 100% param), meaning it misses a “}” after that.

@Alcides1987, you have a few places where you should have a closing curly brace (}) but instead you have an opening curly brace ({)
Look at the sample code in the lesson and compare it with yours to see what I mean.
You’ve got this. It’s just little typo’s.