Create Movement Using CSS Animationn 3

HTML-CSS
1

Tell us what’s happening:
My code wasn’t displaying any effect. After adding the left offset property and setting it to 0px, 25px and -25px for 0%, 50%, and 100% respectively, all I got was to still add the left offset property, I am confused here please help out

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;
}

@keyframes rainbow {
  0% {
    background-color: blue;
    left: 0px;
    top: 0px;
    
  }
  50% {
    background-color: green;
    left: 25px;
    top: 0px;
    
  }
  100% {
    background-color: yellow;
    left: -25px;
    top: 0px;
    
  }
}
</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/80.0.3987.122 Safari/537.36.

Challenge: Create Movement Using CSS Animation

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

2

this code will show the effect once, and then stop, you need to reload to see the effect start again

in the code your issues are:
you have changed the 50% top offset property, it should be at 50px, not 0px

then there is an issue that seems more related to the tests:
you need to add the left offset property below the top offset property or the tests will fail

3

Instead of putting it before the top lines, try putting your left rules in the blank lines provided. It shouldn’t matter, but the tests may be expecting you to do it a specific way.