Sometimes, we must create animations for element changes on a web page with controlling factors such as speed, delay time, and duration. In such cases, the transition property can be utilized to accomplish this task.

The element always has two states: initial and final. We can control the element change behavior with the help of the following properties:

• transition-property - The name of the CSS property that we need to animate;
• transition-duration - The time during which we need to change the element state. It is specified in seconds (s) or milliseconds (ms);
• transition-timing-function - It specifies the speed curve of the transition effect. Typical values are ease, linear, ease-in, ease-out, and ease-in-out;
• transition-delay - The time delay before the transition effect starts. It is specified in seconds (s) or milliseconds (ms).

We will consider each property further in this course.

Note

1 second = 1000 milliseconds. So:

• 0.1s = 100ms;
• 2.5s = 2500ms;
• 0.5s = 500ms.

Practice

For example, we want to add a transition effect to the background color of the div element when it's hovered over. Our task is:

• To change the background-color property;
• The delay has to be 0.1 seconds;
• The change of the color has to last 0.3 seconds;
• For the timing-function, we expect ease-in-out value, which means it will start slow, speed up in the middle, and then slow down again at the end.

Hover the element with the help of the cursor to see the result.

We specified all transition related properties to the div element and then for the hover we set only the decoration which we would like to see.