ADVERTISEMENT

What is Transitions in CSS? How to use Transitions In CSS

Telegram Group Join Now

ADVERTISEMENT

What is Transitions in CSS? How to use Transitions In CSS

What is Transitions in CSS? How to use Transitions In CSS
What is Transitions in CSS? How to use Transitions In CSS

 

ADVERTISEMENT

Transitions in CSS

ADVERTISEMENT

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:

ADVERTISEMENT

  1. Transition-Property
  2. Transition-duration
  3. Transition-timing-function
  4. Transition-delay

Syntax:

ADVERTISEMENT

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

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

e.g:

ADVERTISEMENT

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 :

ADVERTISEMENT

transition-property : background ;

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

ADVERTISEMENT

50+ HTML, CSS & JavaScript Projects With Source Code

e.g:

Transition-Duration:

The ‘TRANSITION-DURATION’ property specifies how much time the animation should be completed.
Syntax:

ADVERTISEMENT

transition-duration: 500ms ;

We can also assign multiple durations, each duration would be applied to the corresponding property specified.

ADVERTISEMENT

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

ADVERTISEMENT

e.g:

ADVERTISEMENT

ADVERTISEMENT

Transition-Timing-function:

The ‘TRANSITION-TIMING-FUNCTION’ property gives us control over the acceleration of animation.

Portfolio Website using HTML and CSS (Source Code)

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:

  1. ease
  2. linear
  3. ease-in
  4. ease-out
  5. ease-in-out
  6. step-start
  7. step-end

e.g.:

Transition-Delay:

Transition Delay specifies the duration for which the animation effect should delay.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Syntax:

transition-delay: 100ms;

e.g.:

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

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

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

Written by: @OmBandiwan

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT