Left offset doesnt work

Tell us what’s happening:

Your code so far

 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;
   top: 50px;
   left: 25px;
 100% {
   background-color: yellow;
   top: 0px;

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

Challenge: Create Movement Using CSS Animation

Link to the challenge:

In the @keyframes rule for 0%, top and left offset should be replaced each other. so first write top and then left:

    top: 0px;
    left: 0px;
1 Like

okayy ill try… tysm :slight_smile: