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.

Hover-me / Click-me

CSS Transition Syntax

The syntax of CSS transition is as follows:

transition: property duration timing-function delay;

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:

Example

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

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:

Example

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

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

Output:

Hover-me

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.

Example

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

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.

Example

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

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:

Example

.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 }
Try it

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.

Example

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

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;
}
Try it