Left offset doesnt work

HTML-CSS
1

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

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

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
3

okayy ill try… tysm :slight_smile: