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

by

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

Transitions

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

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


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

e.g:

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 .

Transition-Property:

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.

e.g:

Transition-Duration:

The ‘TRANSITION-DURATION’ property specifies in how much time the animation should be completed.
Syntax:
        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.

e.g:

Transition-Timing-function:

The ‘TRANSITION-TIMING-FUNCTION’ property gives us control over the acceleration of animation.
Syntax:
        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

e.g.:

Transition-Delay:

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



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