Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Transition Time Function | Transitions
Advanced CSS Techniques
course content

Course Content

Advanced CSS Techniques

Advanced CSS Techniques

1. Introduction
2. Item Positioning
3. Transitions
4. Animations
5. Transformations
6. Adaptive/responsive websites and apps
7. Preprocessors

bookTransition Time Function

The 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 container hover.

html

index

css

index

js

index

copy

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.

Note

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 css file.

html

index

css

index

js

index

copy
What is the purpose of the `transition-timing-function`?

What is the purpose of the transition-timing-function?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 3. Chapter 4
We're sorry to hear that something went wrong. What happened?
some-alt