In one of the previous lessons, we introduced the pseudo-selectors, which allow you to define properties that only activate when the element is under a particular state. For example, with the following setup, the <div> will double its width when the cursor is hovered on top.
1div {
2 padding: 10px;
3 margin: auto;
4 border: 2px solid darkviolet;
5 border-radius: 10px;
6 font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
7 "Lucida Sans", Arial, sans-serif;
8
9 color: darkviolet;
10 width: 200px;
11}
12
13div:hover {
14 color: white;
15 background-color: darkviolet;
16 width: 400px;
17}But notice that the change happens instantly, so what if you want to customize transition to make the change smoother? You will need to use the transition properties.
1div {
2 . . .
3
4 transition-property: width;
5 transition-duration: 2s;
6}The transition-property specifies the name of the CSS property for which this transition configuration is created. And the transition-duration determines how long it takes for the transition effect to complete. In this case, the width of the <div> element will take 2 seconds to change from 200px to 400px.
You can also specify multiple transition properties like this:
1div {
2 . . .
3
4 transition-property: width, color, background-color;
5 transition-duration: 2s;
6}The transition timing function
Currently, all the transitions are linear, meaning the speed of changes remains constant throughout the transition process. You can customize this effect using the transition-timing-function property. Some common values include:
linear
This is the default behavior. The transition speed remains constant from start to end, as we've demonstrated before. This option is equivalent to using a cubic-bezier() function with values cubic-bezier(0,0,1,1).
1div {
2 . . .
3
4 transition-property: width, color, background-color;
5 transition-duration: 2s;
6 transition-timing-function: linear;
7 /* transition-timing-function: cubic-bezier(0,0,1,1); */
8}The function defines a Cubic Bezier curve. I'll spare you the complex mathematical definition, which looks like this:
Instead, all you need to know is that this curve is defined by four control points:
With these four control points in the above example, the transition will start slow, accelerate in the middle, and finish slowly. You don't need to know precisely how to calculate these points. You can easily find the desired control points using this website.
ease
Corresponds to the Cubic Bezier function cubic-bezier(0.25,0.1,0.25,1). The transition will begin slowly, fast in the middle, and finish slowly.
ease-in
Corresponds to the Cubic Bezier function cubic-bezier(0.42,0,1,1). The transition will begin slowly and then accelerate.
ease-out
Corresponds to the Cubic Bezier function cubic-bezier(0,0,0.58,1). The transition will begin fast and then decelerate to end slowly.
ease-in-out
Corresponds to the Cubic Bezier function cubic-bezier(0.42,0,0.58,1). The transition will begin slowly, accelerate in the middle, and finish slowly. This is very similar to ease, but as you can see from the curve, it is much smoother, which means there won't be a noticeable acceleration or deceleration phase.
step-start and step-end
This transition is a bit different. It is defined by a stepping function, steps(), which takes two values. The first one specifies the number of steps, and the second one sets the point at which the change occurs within the step, either start or end. For example:
1div {
2 . . .
3
4 transition-property: width, color, background-color;
5 transition-duration: 2s;
6 transition-timing-function: steps(5, start);
7}In this case, the transition will take five steps, and the change happens at the start of each step.
The step-start option corresponds to the function steps(1, start), and the step-end option corresponds to the function steps(1, end).
Transition delay
You can also set a delay for the transition using the transition-delay property.
1div {
2 . . .
3
4 transition-property: width, color, background-color;
5 transition-duration: 2s;
6 transition-timing-function: ease-in-out;
7 transition-delay: 1s;
8}Notice that the transition only starts one second after the cursor is hovered over the <div> element.
The shorthand
Lastly, CSS also provides a shorthand property that enables you to define all transition properties together. The shorthand has the following syntax:
1transition: <property> <duration> <timing_function> <delay>;1div {
2 . . .
3 transition: width 2s ease-in-out 1s;
4}You can also define multiple transitions using the transition shorthand by dividing different cases with commas:
1div {
2 . . .
3 transition: width 2s ease-in-out 1s,
4 color 2s ease-in-out 1s,
5 background-color 2s ease-in-out 1s;
6}