Learn How Bezier Curves Work - seems i do not understand the topic, can someone help?

Tell us what’s happening:

Your code so far


    border-radius: 50%;
    background: linear-gradient(
    position: fixed;  
    width: 50px;
    height: 50px;
    margin-top: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  #ball1 { 
    left: 27%;
    animation-timing-function: cubic-bezier(1,1,1,1);
  #ball2 { 
    left: 56%;
    animation-timing-function: ease-out;

@keyframes bounce {
  0% {
    top: 0px;
  100% {
    top: 249px;


<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0.

Link to the challenge:

they asked you to use the point values given in the example

the example was:

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

so just use those points.

Sorry for replying two year after the post (a year and five months)

the example gave you coordinate of two points that has the same value for x and y
it is equivalent to the graph x = y which is a straight slope.
what that basically means is that the speed will be constant throughout the animation duration

a graph that looks like U will make the animation start at high speed, decelerate in the middle and end with the same high speed

try plotting the graph to visualize it