Tell us what’s happening:
Good evening, I wanted someone to check my code if they could please. Here is the challenge that i’m trying to accomplish.
To see the effect of this Bezier curve in action, change the animation-timing-function of the element with id of red to a cubic-bezier function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1. This will make both elements progress through the animation similarly…
My code is below. If someone could give me a had with this I would appreciate it, thank you.
Sincerely,
Mark Scott Benson
Your code so far
<style>
.balls{
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#red {
background: red;
left: 27%;
animation-timing-function: cubic-bezier(x1, y1, x2, y2);
}
#blue {
background: blue;
left: 56%;
animation-timing-function: ease-out;
}
@keyframes bounce {
0% {
top: 0px;
}
100% {
top: 249px;
}
}
</style>
<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36
.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic