Table of Contents
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:
- Transition-Property
- Transition-duration
- Transition-timing-function
- Transition-delay
Syntax:
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 .
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.
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.
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.
Thank you for visiting our Blog today. Please do Check out our other posts.
Written by: @OmBandiwan