In this concept , I unable to understand how to use the "cubic-bezier" function. Please provide a solution for this concept

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style>
.balls {
  border-radius: 50%;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 60%;
  animation-name: jump;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
#red {
  background: red;
  left: 25%;
  animation-timing-function: linear;
}
#blue {
  background: blue;
  left: 50%;
  animation-timing-function: ease-out;
}
#green {
  background: green;
  left: 75%;
  animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1);
}

@keyframes jump {
  50% {
    top: 10%;
  }
}
</style>
<div class="balls" id="red"></div>
<div class="balls" id="blue"></div>
<div class="balls" id="green"></div>

Your browser information:

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

Challenge: Make Motion More Natural Using a Bezier Curve

Link to the challenge:

2

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

The more information you give us, the more likely we are to be able to help.

3

A cubic-bezier curve in this context describes the movement of an element from a start point to an end point.

If the curve is just a straight line, the element moves from start to end with a constant speed.
Examples: cubic-bezier(0, 0, 1, 1) or cubic-bezier(0.2, 0.2, 0.44, 0.44)
(those two are identical in terms of the manner of the movement)

A steeper curve means that the element accelerates. A shallower curve makes the element slow down.

The four numbers that you enter are just parameters that define the shape of the curve.

You can play with cubic-beziers here to get a better understanding (click “go” and play with the parameters)
https://cubic-bezier.com/#.69,.1,1,.1

1 Like
4

Thank you for the explanation and resource that you provided. Stay safe stay happy.