solution @keyframes and animation Properties Work

What is your hint or solution suggestion?

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; } }

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

Link to the challenge:

Hi, not sure if you’re asking how to improve it or just confused why it doesn’t’ pass the test.

In case the test is not passing, you’re doing it well, it’s just a matter of formatting.
Try this

@keyframes rainbow { 
  0% { background-color: blue; } 
  50% { background-color: green; }    
100% { background-color: yellow; } 
}

Also, you can format the code in the post so ppl will help out sooner quicker. This is the syntax:
```
and code goes here
```

@anon10002461, most of the posts in the #contributors sub-forum which are formatted like this are campers’ contributions towards the guide posts:

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

Hope this clarifies

Thank you, for your guide post contribution. I have taken your suggestions and included them in the following guide post:

We look forward to your further contribution.