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 increase user experience.
The most basic way to animate something is with a transition

From MDN

Transitions enable you to define the transition between two states of an element.

When a state of an element changes through things like hover or focus, its CSS properties change. Transition property makes the changes transition from one state to another instead of instantly changing from one state to another.

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 define the duration of a specified transition.
This can either take seconds (s) or milliseconds (ms)

1 second = 1000 milliseconds

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 350ms
• Box 3 has a slow transition-duration of 2000ms

For basics animations such as hover and focus, you want your transitions to happen relatively fast.

2. Transition Property

transition-property is used to specify the name of the CSS property the transition effect is for.

What are you transitioning

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.
  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;
• Box 3 has the transition on the background but not on the 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 1500ms. 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.

A Shorthand For All Of These

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 so 👇.

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

Conclusion

The transition 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. If it was, please share it. It really makes a huge difference .
Thanks for reading & Keep Coding!