CSS transition is a short-hand property, it is used to perform a transition between two states of an element.
Without the use of this property, the element will be turned to its next state without any effects like animation.
Using classes such as :hover and :active, different states can be defined.
Following, are the properties used in CSS transition,Syntax
transition: transition-property1 transition-duration1 transition-timing-function1 transition-delay1,transition-property2 transition-duration2 transition-timing-function2 transition-delay2,......................,......................,transition-propertyN transition-durationN transition-timing-functionN transition-delayN;
In the above example, we have set only the transition-property, so the transition effect wont happen.
In order for the transition effect to take place, transition-duration is also required.
In the above example, we have specified both transition-property and transition-duration.
Here we have specified the transition-property as width and transition-duration as 3 seconds.
So when the mouse is moved over the div element, the width will stretch upto 200px.
In the above example, we have specified transition-property, transition-duration and transition-timing.
Here we set CSS property width and set the transition-duration as 2 seconds and transition-timing as steps(6).
So when the mouse is moved over the div element,the transition will occur slowly since we specified ease-in for transition-timing and the width will stretch upto 200px.
In the above example, we have have specified transition-property, transition-duration, transition-timing and transition-delay.
In here we have set CSS property transform and set the transition-duration as 2 seconds, transition-timing as ease-in and transition delay as 2s.
So when the mouse is moved over the div element,the transition will start after a 2 second delay.
In this example, within a single transition property we have set multiple transition effects for a single element.
Each transition effect will be separated using comma(,).
So each transition effect will be handled using the transition-property type specified.