Css animation to create movement

HTML-CSS
1

Tell us what’s happening:
Add a horizontal motion to the div animation. Using the left offset property, add to the @keyframes rule so rainbow starts at 0 pixels at 0% , moves to 25 pixels at 50% , and ends at -25 pixels at 100% . Don’t replace the top property in the editor - the animation should have both vertical and horizontal motion.

IN THIS QUESTION WHERE IT IS ASKED NOT TO REPLACE TOP PROPERTY THEN WHY HAVE WE REPLACED IT WITH LEFT?

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;

  }
  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/81.0.4044.129 Safari/537.36.

Challenge: Create Movement Using CSS Animation

Link to the challenge:

2

You are not supposed to replace the top offset. Try resetting the lesson, then adding the left offset below the top offset. :upside_down_face: