Tell us what’s happening:
so the assignment is:
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.
and i dont understand what im supposed to do… so if anyone could explain it that would mean a lot to me…
**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;
top: 0px;
}
50% {
background-color: green;
top: 50px;
}
100% {
background-color: yellow;
top: 0px;
}
}
</style>
<div id="rect"></div>
**Your browser information:**
User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14092.46.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.69 Safari/537.36
Challenge: Create Movement Using CSS Animation
Link to the challenge: