Code not working please help

HTML-CSS
1

Applied Visual Design: Learn How the CSS @keyframes and animation Properties Work

code%20camp
code%20camp715×748 11.8 KB

Create an animation for the element with the id rect , by setting the animation-name to rainbow and the animation-duration to 4 seconds. Next, declare a @keyframes rule, and set the background-color at the beginning of the animation ( 0% ) to blue, the middle of the animation ( 50% ) to green, and the end of the animation ( 100% ) to yellow.

I follwed the instructions. I also looked on youtube and it seems like I everything that the guy did in the video. The animation doesn’t work and I didn’t get the checkmark. Thanks in advance :grinning:

2

check your spelling of “background”. I think that might be it.

3 
#rect {
    animation-name:rainbow;
    animation-duration:4s;

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

Your code has been blurred out to avoid spoiling a full working solution for other campers who may not yet want to see a complete solution. In the future, if you post a full passing solution to a challenge and have questions about it, please surround it with [spoiler] and [/spoiler] tags on the line above and below your solution code.

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

Thank you for understanding.

5

Yep I spelled background wrong. I feel so silly I have been stuck on this for so long. Thank you!