Free Coding Ebook 👉 Get Now
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: 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.
The ‘TRANSITION-PROPERTY’ property specifies over which specific CSS -Property the transitions should apply.
transition-property : background ;
NOTE: The value for the transition-property should be a valid CSS-property name like width, color, background, etc.
The ‘TRANSITION-DURATION’ property specifies how much time the animation should be completed.
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.
The ‘TRANSITION-TIMING-FUNCTION’ property gives us control over the acceleration of animation.
Portfolio Website using HTML and CSS (Source Code)
NOTE:By default the value of the Transition-timing-function is “ease”.
The predefined values for properties are as follows:
Transition Delay specifies the duration for which the animation effect should delay.
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