Create Movement Using CSS Animation!``

Create Movement Using CSS Animation!``
0

#1

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


#2

The instructions are very specific that you should not replace the top property in the editor. For some reason, you changed the top property from 50px to 25px at 50% keyframes and changed the top property from 0px to -25px at 100% keyframes.

Either manually change those top property values back to their original values, or click Reset All Code, so that the challenge populates with the original code. Once the code is reset, only change the left property values according to the instructions.


#3

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.


#4

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: