Bezier AND HIS JOKES

HTML-CSS
#1

*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…

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:(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>

Your browser information:

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

Link to the challenge:

#2

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

bouncing balls

1 Like
#3

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.”*
#4

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

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

Thanks bro! full resolution

#7