CSS Transitions

Prev
Next

What is CSS Transitions?

Using CSS transition you can smoothly change the property of a particular element over a given duration.

Why to use CSS Transitions?

With Transition

If use the transition property, the property of the element will change smoothly.

It changes the element gradually from one style to another style while you do some operations such as mouse hover.

Hover over me

Text & Border will change to Red smoothly

Without Transition

If you do not use the transition property, the property of the element will not change smoothly.

Hover over me

Text & Border will Not change to Red smoothly

CSS Transitions shorthand

The shorthand property for CSS Transition is the  transition property which includes 4 properties which are transition-property, transition-duration, transition-timing-function and transition-delay.

Syntax for shorthand transition:
transition: transition-property transition-duration transition-timing-function transition-delay ;

Example

.shorthand-css { 
  background: rgba(13, 14, 10, 0.5); 
  color: white;
  transform: translate(1px,-170px);
  transition:background-color 3s;
}
.shorthand-css:hover {
  background-color:green;
}
Run the Code

In the above example, the transition-property is  background-color and the transition-duration is 3s while there is no value for transition-timing-function and transition-delay.

The transition-duration of  3s simply means that the duration of the transition is 3 seconds.

Transition Delay

The transition-delay property delays a transition. 

If I wish to delay a transition by 1s, then I will define the value of  transition-delay property like below –

Example

.transition-delay {
   margin: auto;
   width:80%;
   background-color:black;
   color:orange;
   border: 5px solid;
   padding:5px;
   transition-property:color;
	transition-duration:3s;
	transition-delay:1s;
 }

.transition-delay:hover {
  color:red;
}
Run the Code

You can also use the shorthand transition property where you can include the value of transition-delay of 1s like –

transition: color 3s 1s;

Transition Timing Function

The transition-timing-function property controls the speed curve of the transition. It can take either of these values –

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier(a,b,c,d) – Where a and c will be between 0 to 1.

 

Example

div {
  position:relative;
  margin:20px;
  width:120px;
  text-align:center;
  border-radius:5%;
  background:orange;
  transition-property:width;
  transition-duration:1s;
}
.ease {
  transition-timing-function: ease;
}
.linear {
  transition-timing-function: linear;
}
.easein { 
  transition-timing-function: ease-in;
}
.easeout {
  transition-timing-function: ease-out;
}
.easeinout {
  transition-timing-function: ease-in-out;
}
div:hover {
  width:80%;
}
Run the Code

How to change multiple properties using transition

To change multiple properties using the transition property, you can define multiple properties separated by commas(,).

Syntax to include multiple properties:
transition: property-1-details, property-2-details,…property-n-details ;

Example

div {
  padding:5px;
  text-align:center;
  border:3px solid red;
  width: 150px;
  height: 20px;
  background-color: orange;
  transition: width 2s, height 4s, background-color 6s, border 5s;
}

div:hover {
  width: 300px;
  height: 300px;
  background-color:green;
  border:6px double blue;
}
Run the Code

Individual CSS transition properties

Instead of using the shorthand transition property, you can also use the transition-property, transition-duration , transition-delay and transition-timing-function properties separately as –

Example

.transition-individual {
   margin: auto;
   width:100%;
   background-color:black;
   color:orange;
   border: 5px solid;
   padding:5px;
   transition-property: color;
	transition-duration: 5s;
	transition-timing-function: ease;
	transition-delay: 0.5s;
 }

.transition-individual:hover {
  color:aqua;
}
Run the Code

Transition All

Suppose, you wish to change multiple properties but do not want to write all the properties one by one in the transition property, then you can use the keyword “all” to include all the properties in the transition.

Syntax of shorthand transition all:
transition: all {transition-duration} {transition-timing-function} {transition-delay};

Syntax of individual transition all:
transition-property: all;
transition-duration: [time];
transition-timing-function: [linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(a,b,c,d)];
transition-delay:[time(in seonds/milliseconds);

Here, transition-property and transition-duration are mandatory.

Few Sample formats are  –

Format1: transition: all 0.3s ease;
Format2: transition: all 0.4s ease-in-out;
Format3: transition: all 0.4s;

Format4: 
  transition-property:all;
  transition-duration:0.2s;

Format5:
  transition-property:all;
  transition-duration:0.4s;
  transition-timing-function:linear;

Format6:
  transition-property:all;
  transition-duration:0.3s;
  transition-timing-function:ease-out;
  transition-delay:0.5s;

Let us see 1 Example –

Example

div {
  padding:5px;
  text-align:center;
  border:3px solid red;
  width: 150px;
  height: 20px;
  background-color: orange;
  transition-property: all;
  transition-duration: 0.4s;
}

div:hover {
  width: 340px;
  height: 340px;
  background-color:aqua;
  border:4px double red;
}
Run the Code
Prev
Next

Tutorials for all brains!