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

Tell us what’s happening:

``````
<style>
.balls {
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>

``````

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

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.

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

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