CSS Transition - Smoothly Change CSS Properties

CSS transition is a property that allows you to change CSS properties smoothly, over a given duration. That means if an element is changing color from red to blue it will do so smoothly, instead of having a sudden change, and will cover all colors in between.

It controls the animation and calculates the intermediate state between two different property values. Instead of changing value instantaneously it slowly changes older to newer values.

Using transition, you can change any CSS property smoothly, including colors, background-color, width, height, margin, padding, border-radius, etc.

Look at the example below. When you hover over the box, the width of the box increases, and the background color changes smoothly.

CSS Transition Syntax

The syntax of CSS transition is as follows:

transition: property duration timing-function delay;

• property - The CSS property to which the transition will be applied. It can be any CSS property like color, background-color, width, height, margin, padding, border-radius, etc.
• duration - The duration of the transition. It can be in seconds (s) or milliseconds (ms).
• timing-function - The speed curve of the transition. It can be linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n).
• delay - A delay before the transition starts. It can be in seconds (s) or milliseconds (ms).

How to use CSS transition

If you are using transition property then there must be an action that triggers the transition. For example, if you want to change the background color of a box when you hover over it, then you must use :hover pseudo-class.

So you should have different values for the same property in two different states. For example, if you want to change the background color of a box when you hover over it, then you must have different values for the background color in two different states.

For example:

.box {
  background-color: red;
}
.box:hover {
  background-color: blue;
}

Here, the background color of the box is red when it is not hovered and blue when it hovers.

Now, to add a transition to this. Use the transition property to the box and specify the property you want to change and the duration of the transition.

For example:

.box {
  background-color: red;
  /* transition: property duration; */
  transition: background-color 2s;
}

Here, the background color of the box will change from red to blue smoothly, over a duration of 2 seconds.

Output:

Multiple Properties Transition

In the above example, we changed only 1 property with the transition. But you can also apply a transition to multiple properties at the same time.

There are 2 ways to do this:

• Specify transition rules for each property separated by a comma.
• Specify transition rules for all properties at once using all keywords.

.box {
  background-color: red;
  font-size: 10px;

  /* multiple transition */
  transition: background-color 2s, font-size 2s;
  /* or */
  transition: all 2s;
}

Output:

CSS Transition Properties

You can control different aspects of the transition effect individually using the following properties:

1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay
5. transition (shorthand)

1. CSS transition property

The transition-property defines the CSS property for which you want the transition effect. Example transition-property: color

By default, the value of this property is all, which means that the transition effect will be applied to all the CSS properties.

.box {
    background-color: red;
    transition-property: background-color;
}
.box:hover {
    background-color: blue;
}

2. CSS transition duration

transition-duration property defines the time in which the value of any CSS property will change from value1 to value2.

If transition duration is not mentioned then the transition effect is not visible as a change in values takes place immediately.

.box {
    background-color: red;
}
.box:hover {
    transition-duration: 3s;
    background-color: blue;
}

3. CSS transition timing function

transition-timing-function property defines the speed curve of the transition effect. Simply, it defines how the transition effect will start, accelerate, and then end.

The transition-timing-function have the following values:

• ease - The transition effect starts slowly, then accelerates, and then ends slowly. This is the default value.
• linear - The transition effect has the same speed from start to end.
• ease-in - The transition effect starts slowly and then accelerates.
• ease-out - The transition effect starts quickly and then decelerates.
• ease-in-out - The transition effect starts slowly, accelerates in the middle, and then decelerates.
• cubic-bezier(n,n,n,n) - Allows you to define your own values in a cubic-bezier function. The four values must be numbers between 0 and 1. Example transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)

.box1 { transition-timing-function: ease }

.box2 { transition-timing-function: linear }

.box3 { transition-timing-function: ease-in }

.box4 { transition-timing-function: ease-out }

.box5 { transition-timing-function: ease-in-out }

4. CSS transition delay

transition-delay property defines the time to wait before the transition effect will start.

If the transition effect is not mentioned then the transition starts immediately as it is triggered but when transition-delay is mentioned then the effect starts taking place after the mentioned time.

.box {
    background-color: red;
    height: 100px;
    width: 200px;
}
.box:hover {
    transition: all 2s;
    transition-delay: 1s;
    background-color: blue;
    width: 100%;
}

5. CSS transition

The transition is a shorthand property for all transition properties.

transition: property duration timing-function delay;
/* compulsion to mention property and duration */
/* other properties are optional */

Let's see an example of transition shorthand property.

.box {
    background-color: red;
    /* transition */
    transition: all 2s linear 1s;
}
.box:hover {
    background-color: blue;
}