Advanced CSS Techniques
transition-timing-function specifies the speed curve of a transition effect. It determines how fast an animation starts and stops and the pace at which it progresses.
There are essential keywords that describe the different time_functions:
ease- Default value. A transition effect with a slow start, then fast, then ends slowly.
linear- It has a constant speed throughout the transition.
ease-in- A transition effect with a slow start.
ease-out- A transition effect with a slow end.
ease-in-out- A transition effect with a slow start and end, and a fast middle.
Let's run the following example to see the difference between them. The transition will work only on the
Cubic Bezier curve
We can also use the
cubic-bezier() function to create a custom
timing-function. This function takes four values representing the control points of a cubic bezier curve, which determines the shape of the timing function.
No worries. We do not need the knowledge of mathematics to generate the cubic bezier function as a css property value. We can use the cubic-bezier.com source to generate our custom functions.
Let's consider the following example to see how easy it is to use. The
cubic-bezier function was generated with the help of dragging the points on that source.
As a result, we can copy the function at the top to our
What is the purpose of the "transition-timing-function"?
Select the correct answer
Everything was clear?