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

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

 

Transitions in 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
  2. Transition-duration
  3. Transition-timing-function
  4. 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 the transition-property should be a valid CSS-property name like width, color, background, etc.

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:

transition-duration: 500ms ;

We can also assign multiple durations, each duration would be applied to the 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.

Portfolio Website using HTML and CSS (Source Code)

Syntax:

ADVERTISEMENT

transition-timing-function: ease;

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

ADVERTISEMENT

The predefined values for properties are as follows:

ADVERTISEMENT

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

e.g.:

ADVERTISEMENT

ADVERTISEMENT

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



Leave a Reply