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.

Hi,
just a quick update of what’s happening in my life!

I’m quite busy both with work, university and recently joined language lessons after a trip to Japan.
Does any of the above have something to do with web development? In fact, it does.

Going a year back in time I did nothing of the above (no job, no university, no language lessons, not even a trip which I wanted to do for a few years already). I hope that one of the successes in the next year will be starting a job as a web developer. I find myself doing more and more things of interest to me and I hope that posts that I will write in the next year will be of technical nature too, around the theme of this blog.

My current job in sales in an IT startup, where I work directly with developers (they sit just next to me), strongly boosted my interest in programming and gives me a real taste of what it is like. To be honest I wanted to work at least some time in sales before getting a job as a developer and that’s what I’m doing. Even better, working in sales in a software company! I strongly believe that developing communication (and sales) skills now, will be crucial for my life in the future and it greatly boosts my confidence over time. Hopefully, it will help me to get into a good company later on, but on a different position.

Till the next year!