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;
animation-motion: horizontal;
}
@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/68.0.3440.106 Safari/537.36
.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-movement-using-css-animation/
joops75
2
You violated this rule:
Don’t replace the top property in the editor - the animation should have both vertical and horizontal motion.
You may need to reset your code if you can’t retrieve these values.
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;
animation-motion: horizontal;
}
@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/68.0.3440.106 Safari/537.36
.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-movement-using-css-animation/
Your code is correct, but why did you remove the top
properties from 0%, 50% and 100%, do not alter existing code, just add what the instruction says.
Your code is fine, reset your code and only add the left
properties ( Do no remove top
property )
1 Like
you are missing the @keyframes 100%, 50% and 0%
1 Like