The CSS Transition property is the simplest way to add animations to our website. Animation on the web is a good way to catch attention and if done properly it leads to increase in user experience. The most basic way to animate something is with a transition.

CSS transitions provide a way to control animation speed when changing CSS properties. CSS transitions let you decide which properties to animate, when the animation will start, how long the transition will last, and how the transition will run. CSS Transitions are controlled using the shorthand transition property. This is the best way to configure transitions.

When you want something to go from left to right. Without the transition property the element will just jump from left to right. But when adding transition to it, the element will slowly start a motion to go from left to right.

Transition Properties

1. Transition Duration

transition-duration is used to specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time. This can either take seconds (s) or milliseconds (ms).

As a general rule, I highly suggest that you use milliseconds because while CSS accepts both seconds and milliseconds, JavaScript only accepts milliseconds. So it's better to just use milliseconds to keep the consistency.

.box{
    transition-duration: 1000ms;
}

The following boxes change color on hover

• Box 1 does not have a transition, thus the color changes instantly.

• Box 2 has a fast transition-duration of 400ms.

• Box 3 has a slow transition-duration of 2500ms.

2. Transition Property

transition-property is used to specifies the name or names of the CSS properties to which transitions should be applied.

You can put any property that you're transitioning - width, height, background, and many more.

The following boxes change color and rotate on hover

• Box 1 has does not have any transition, so change happens instantly.

• Box 2 has the transition on all properties.

• Box 3 has the transition on the background but not on the transform.

If you don't specify the transition property, the transition will happen on all effects - this is the same as transition-property: all; or transition-property: background, transform;

3. Transition Timing Function

transition-timing-property is used to describe how a transition will proceed over its duration, allowing a transition to change speed during its course. This takes in four options; linear, ease-in, ease-out, and ease-in-out.

To demonstrate these clearly, let's hover on the following boxes first.

Notice when you hover on them, all of them have different animations while their transition-duration is the same. All these have a transition-duration of 1700ms. What causes different animations is the transition-timing-function.

Let's get to know each Transition Timing Function

• linear - Transitions at an even speed.

• ease-in - Starts off slowly, with the transition speed increasing until complete. This is the default if you don't specify.

• ease-out - Starts transitioning quickly, with the transition speed decreasing until complete.

• ease-in-out - Starts quickly, slows down in the middle, and speed increases towards the end. It is the combination of ease-in and ease-out.

4. Transition Delay

transition-delay specifies how long the transition takes to start. Just like the transition-duration, this takes in seconds or milliseconds.

Just like other CSS properties such as margin, transition also has a short way of writing it.

Its format goes like this;

transition: transform 250ms ease-in 100ms;

The important thing to consider here is the numbers. The first number will always be transition-duration while the second number will always be transition-delay. If you want to add a transition for two different properties, let's say for transform and background, you just separate them with a comma (,) like this

transition: transform 250ms ease-in 150ms, background 200ms ease-in 100ms;

I will conclude that thetransition property is a very powerful CSS property. Play around with it and use it to create beautiful animations.

I hope this article is useful to you.

Thanks for reading & Happy Coding!