How to use CSS cubic-bezier in a nutshell

I had some trouble with understanding how the cubic-bezier function works while going through the tutorials on https://freecodecamp.org. My answer is based on the previous answer by eirenaois on StackOverflow.

1. Bezier curve is based on four points: P0, P1, P2, and P3. P0 is set by default to (0, 0) and P3 is set by default to (1, 1). These are the beginning and the ending of the curve and you can’t change them.
2. The curve will stretch differently depending on what coordinates you give for points P1 and P2.

In the example above P1 is set to (0.1, 0.1) and P2 is set to (1, 0). The speed of the animation depends on how much does the state change per given amount of time. In this example, the animation gets faster with time. For the first half of the time used for the animation, it will cover about 15% of the distance (when Time = 0.5, State ~ 0.15). It will cover the remaining 85% of the distance in the second half.

Please check the example in jsfiddle to see how the animation works in practice: cubic-bezier ball animation

HTML:

<div class=”ball”></div>

CSS:

  .ball{
background: red;
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 50%;
animation-name: bounce;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.10, .10, 1, 0);
}

@keyframes bounce {
0% {
left: 0%;
}
100% {
left: 100%;
}
}

In the example, the ball moves from the left edge of the screen to the right edge over the course of 4 seconds. Keyframes are there to set where the animation should begin and end, animation-timing-function: cubic-bezier() to set the speed of the animation at different points in time.

You can find the CSS cubic-bezier Builder here.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *