CSS transition property

CSS transition

CSS transition is a short-hand property, it is used to perform a transition between two state of an element.

Without the use of this property, the element will be turned to its next state without any animation like effect.

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;
  • transition-property : It is used to specify the transition effect which is used for the CSS property.
  • transition-duration : It is used to specify the time (seconds or milliseconds). It denotes how long the transition takes to complete.
  • transition-timing : It is used to specify the time in which the transition takes place before it is completed.
  • transition-delay : It is used to specify, how long to wait before the transition starts.

Example 1 - transition property (required)

Try Yourself

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.


Example 2 - transition-duration (required)

Try Yourself

In the above example, we have have specified both transition-property and transition-duration.

In 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.


Example 3 - transition timing (optional)

Try Yourself

In the above example, we have have specified transition-property, transition-duration and transition-timing.

In 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.


Example 4 - transition-delay (optional)

Try Yourself

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.


Example 5 - Many transition properties

Try Yourself

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 we specified.


Example 6

Try Yourself