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:
- 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;”.
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
- ease
- linear
- ease-in
- ease-out
- ease-in-out
- step-start
- 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
