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



</style>
<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:
https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work

2

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

3

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

4

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.

5

@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.

6