Transitions in CSS | How to use CSS Transitions | Transitions 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 transition-property should be a valid CSS-property name like width,color,background,etc.
The ‘TRANSITION-DURATION’ property specifies in how much time the animation should be completed.
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.
The ‘TRANSITION-TIMING-FUNCTION’ property gives us control over the acceleration of animation.
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 animation effect should delayed for.