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: