html

Transitions in CSS

To make your web design appealing you have to add certain animations to your content. For handling the behavior of these animations, CSS transitions are used. Transitions are referred to as a shift in the state of an element smoothly in a specified duration. Therefore, when applying transition effects on various CSS elements you must state the CSS property on which the effect will be applied as well as the time of the effect. Specifying the duration is highly important or otherwise, there will be no transition effect on the particular element.

There are certain CSS transition properties that are used to add transition effects on various elements, we explained them in detail below.

CSS Transition Properties

CSS provides various transition properties which are as follows.

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

All of the above-mentioned properties are explained below.

transition-property

This property is used to specify various CSS properties to which the transition effect should be applied.

Syntax

transition-property: none | all | property | inherit | initial;

All value is a default value that applies the transition effect to all of the properties specified, whereas, the property value specifies the property name on which the effect will be applied.

Example
Suppose you want to alter the width and height of a div container using the transition property.

HTML

<div>Bring mouse over me</div>

We are simply defining a div container.

CSS

div {
  width: 100px;
  height: 90px;
  background: pink;
  transition-property: width, height;
  transition-duration: 2s;
}
div:hover {
  width: 250px;
  height: 250px;
}

We are setting the original width of the div to 100px and height to 90px then we are applying a transition effect on both width and height of div for 2 seconds. Specifying the duration is a must otherwise the transition will not apply. Moreover, the transition effect will occur when the user brings the mouse on the div container.

Output

A transition effect was implemented successfully on the div container.

transition-duration

This property specifies for how long the transition effect should continue to occur. Each property can be given a single duration or you can assign different durations to various CSS properties.

Syntax

time-duration: time | inherit | initial;

The time parameter specifies the duration of the transition effect.

Example
Suppose you want to increase the font size and weight of a paragraph when a mouse cursor is brought over it.

HTML

<p>Bring mouse over me</p>

We have defined our paragraph.

CSS

p {
  font-size: 20px;
  transition-property: font-size;
  transition-duration: 3s;
}
p:hover {
  font-size: 50px;
}

The code above specifies that when the mouse cursor is brought over the paragraph the font size of the paragraph will change and this effect will occur for 3 seconds.

Output

The transition-duration property is working properly.

transition-delay

This property specifies the delay between a change in a property and the start of the transition effect.

Syntax

time-duration: time | inherit | initial;

The time parameter specifies the waiting duration before the transition effect begins.

Example
Suppose you want to apply a transition effect on a div element after a delay of 2 seconds, follow the example below.

HTML

<div>Bring mouse over me</div>

In the above code, we have simply created a div container.

CSS

div {
  height: 100px;
  width: 100px;
  background-color: pink;
  transition-property: height;
  transition-duration: 3s;
  transition-delay: 2s;
}
div:hover {
  height: 200px;
}

According to the above piece of code, the transition effect will occur after the delay of 2 seconds.

Output

This is a transition effect with a delay of 2 seconds.

transition-timing-function

This property is used to define the acceleration curve of the transition effect.

Syntax

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier (n,n,n,n);

All the parameters are explained below.

  • ease: The transition effect occurs in a slow-fast-slow fashion.
  • linear: The transition effect will have the same speed from start to end.
  • ease-in: The transition effect will have a slow beginning.
  • ease-out: The transition effect will have a slow ending.
  • ease-in-out: The transition effect will have a slow beginning as well as a slow end.
  • cubic-bezier (n,n,n,n): The values of the transition effect will be set in a cubic-bezier manner.

Example
Consider the example below.

HTML

<div>Bring mouse over me</div>

A div container was simply created.

CSS

div {
  height: 100px;
  width: 100px;
  background-color: pink;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
}
div:hover {
  width: 200px;
}

According to the above code, the width of the div container will change in a linear fashion which means that the transition effect will have the same speed from beginning to end.

Output

The transition effect is happening in a linear fashion.

transition

This property is a shorthand property that is used to set values to all of the above transition properties.

Syntax

transition: (property) (duration) (timing-function) (delay);

Example
The example below demonstrates the working of the transition property.

CSS

div {
  height: 100px;
  width: 100px;
  background-color: lightseagreen;
  transition: width 0.5s linear 1s;
}
div:hover {
  width: 200px;
}

Using the transition property we are applying a transition effect on the width for 0.5 sec in a linear fashion with a delay of 1 sec.

Output

The transition property is working properly.

Conclusion

Transitions are referred to as a shift in the state of an element smoothly in a specified duration. CSS provides various transition properties which are as follows: transition-property, transition-duration, transition-delay, transition-timing-function, and transition. All of these properties are used to specify the behavior of the transition effect being applied on various HTML elements. In this guide, all of these properties are explained with the help of relevant examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.