Bezier Curves In CSS

Tell us what’s happening:

i’m having issues with this

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: linear;
#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 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36.

Challenge: Learn How Bezier Curves Work

Link to the challenge:

What issues are you having?

Am stucked
iI Dont Know What To Do

What have you tried? What problems are you having?

ok so the question says
" The value of the


property for the element with the id


should be the linear-equivalent cubic-bezier function."
Which is what i dont know

the paragraph just above that says

This animation is a linear change of an element during the length of an animation, and is the same as using the linear keyword. In other words, it changes at a constant speed.

what does it refer to? the solution is there in the challenge description


Ooooooh I see now thanks for your help