I'm not sure exactly what the issue is with my code

Tell us what’s happening:

Your code so far


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

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

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

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

Your browser information:

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

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

You should be using left.

I tried that before ,but again the requirements say do not replace the top variable

You need to add the left offset to the Blue, and put back the top offset in the other two.

hello!

you have to write a left offset under top offset in the keyframes!

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

1 Like

I would recommend you to reset your code and just add the left property mentioned by the instruction at 0%, 50% and 100%

Do not change or remove any other code

1 Like