Create Movement Using CSS Animation!``

Hi there, I am stuck on this lesson and have no idea why! I have read the other topics with these help questions and they all said “you changed the top” or “you didn’t add the correct left in”. I haven’t touched the top and if that left isn’t correct, I am unsure of what is.

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

#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>

I keep getting these errors;

The @keyframes rule for 50% should use the left offset of 25px.
The @keyframes rule for 100% should use the left offset of -25px

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

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

As I stated I didn’t change them. Seems like a lot of people have had the same issue without changing the top part so it might start on the wrong numbers (as it didn’t start on what the demo was) but stated it needed to not be touched.

I also got stuck here , in this challenge everything was okey but still I got errors.
Then I tried to add left to each rule and execute it and finally I got it completed…
I worked for me this way.Hope It may work for others :wink: