Bezier Curves In CSS

HTML-CSS
1

Tell us what’s happening:

i’m having issues with this

Your code so far


`<style>

.balls{
  border-radius: 50%;
  background: linear-gradient(
    35deg,
    #ccffff,
    #ffcccc
  );
  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;
  }
}

</style>

<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:
https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/learn-how-bezier-curves-work

2

What issues are you having?

3

Am stucked
iI Dont Know What To Do

4

What have you tried? What problems are you having?

5

ok so the question says
" The value of the

animation-timing-function

property for the element with the id

ball1

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

6

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

2 Likes
7

Ooooooh I see now thanks for your help