Create Movement Using CSS Animation not working

Tell us what’s happening:
i added the vertical part to the code but its not working

Your code so far


<style>
  div {
    height: 40px;
    width: 70%;
    background: black;
    margin: 50px auto;
    border-radius: 5px;
    position: relative;
    horizontal: left;
  }

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

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

}
</style>

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-movement-using-css-animation

So I don’t really see a reason why the animation shouldn’t work.
But if it’s your test crashing… There’s a simple solution for that.

The exercise askes you not to change the top values:

has to be 50px on 50%
and 0px at 100%

what is the solution please?

Use the values for top in the keyframe declaration that were given to you in the exercise. Like below:

  0% {
    background-color: blue;
    top: 0px;
    
  }
  50% {
    background-color: green;
    top: 50px;
    
  }
  100% {
    background-color: yellow;
    top: 0px;
    
  }
}

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.


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums