Transition shorthand in CSS

CSS | transition property: Here, we are going to learn about the transition shorthand in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on January 17, 2020

Introduction:

Many times we come across various difficulties during the development of a website or web page and we are not aware of the solutions to those problems but as we already know “learning is knowledge”, therefore with that note in mind let us move on with this section and dig in!

Trivia:

It is not an unknown fact anymore that we face difficulties while dealing with the transition of the state of an element from its old to new properties, therefore the question that strikes our mind is, what could be done for a smooth transition? The answer to the very question is Transition Shorthand in CSS. Well, the name should be enough to know the functionality of this property but why don't we have a look at the formal definition of this property for a better understanding.

Definition:

For the change in every CSS property, any changes made in the rendered result is updated and applied while changing from the old property to the new property.

This approach describes a way to specify transitions using CSS properties. These properties are used to change smoothly from the old state to the new state.

Now that we have a better understanding of the property, let us get familiar with the various properties of this transition shorthand. This property can take up to 4 properties which are listed below,

transition-property
transition-duration
transition-timing-function
transition-delay

Syntax:

    Element{
        transition:<property> <duration> <timing-function> <delay>;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            width: 75px;
            height: 75px;
            background: red;
            transition-duration: width .35s ease-in-out;
            ;
        }
        
        div:hover {
            width: 300px;
        }
    </style>
</head>

<body>
    <p>Transition property in CSS</p>
    <div></div>
</body>

</html>

Output

For the given example above, we can see that if we hover over the red box it increases its width to 300px for 0.35s with ease-in-out effect. Therefore, a transition can be seen from one state to another.

More points:

You can specify the transition property as the set of one or more properties that are separated by commas.

Each single property transition describes which transition to be applied to the single property.

Advice:

Therefore the transition property could prove to be very tricky as it is a combination of many properties, therefore one must be very cautious and wise while making use of this property. To time the transition time-frame is very important as it would specify the smoothness of the entire transition.

CSS Tutorial & Examples »

CSS Shadow Effects

Styling Dropdown in CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples