Transitions in CSS | How to use CSS Transitions | Transitions CSS

Transitions in CSS | How to use CSS Transitions | Transitions CSS


Transitions in CSS are used to control the speed of Animation of different CSS properties.
Let us first see What is Transition.

What is Transition?

Transition is a shorthand for the four different transition properties as mentioned below:

  1. Transition-Property
  1. Transition-duration
  1. Transition-timing-function
  1. Transition-delay

        transition: width 1s ease-in-out 4s;

NOTE: The order of the values above is “transition: property duration timing-function delay;”.


We can also define and control all the above mentioned properties individually. Let’s take a closer look at each of the transition-property given above .


The ‘TRANSITION-PROPERTY’ property specifies over which specific CSS -Property the transitions should apply.
Syntax :
        transition-property : background ;

NOTE: The value for transition-property should be a valid CSS-property name like width,color,background,etc.



The ‘TRANSITION-DURATION’ property specifies in how much time the animation should be completed.
        transition-duration: 500ms ;
We can also assign multiple durations, each duration would be applied to corresponding property specified.

NOTE:By default the value of the transition-duration is “0”, which means transition animation would take place instantaneously.



The ‘TRANSITION-TIMING-FUNCTION’ property gives us control over the acceleration of animation.
        transition-timing-function: ease;

NOTE:By default the value of the Transition-timing-function is “ease”.

The predefined values for properties are as follows:

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • step-start
  • step-end



Transition Delay specifies the duration for which animation effect should delayed for.
        transition-delay: 100ms;

NOTE: Transition-Delay Accepts the value in seconds or in miliseconds.

Leave a comment below and let us know if you have any queries. 

Thank you for visiting our Blog today. Please do Check out our other posts.

Written by: @OmBandiwan

Share on:

Leave a Comment