Bezier AND HIS JOKES

*Tell us what’s happening:
Hi guys, i’ve been making homeworks since earlier but i need help on this point, the Red ball it doesn`t get down in the same point that the blue…

``````
<style>
.balls{
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:(0, 0, 0.58, 1);
}

#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>

``````

User Agent is: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36`.

Challenge: Use a Bezier Curve to Move a Graphic

I’ve added the green border to show, but I see them arriving at the same point:

1 Like

What I mean is that when sending the task (to consider it completed), the following appears to me as if it were wrong:

• “The value of the` animation-timing-function` property of the element with the id `red` must be a` cubic-bezier` function with the values ​​x1, y1, x2, y2 set respectively to 0, 0, 0.58, one.”*

remember that the bezier curve influence the speed of the transition, and of the various parts of the transition, not what the actual transition is

1 Like

You have a semicolon `:` after the function name `cubic-bezier` that should not be there.

Should just be:
`cubic-bezier(0, 0, 0.58, 1)`

1 Like

Thanks bro! full resolution