CSS Transitions

Transitions in CSS allow us to control how the transition takes place between the two states of the element. For example, when hovering your mouse over a button, you can change the background color of the element with the help of a CSS selector and pseudo-class.

We can change any other or combination of properties, though. The transition allows us to determine how the change in color takes place. We can use the transitions to animate the changes and make the changes visually appealing to the user hence, giving a better user experience and interactivity.

In this article, we will show you how to animate the transition between the CSS properties. There are four CSS properties that you should use, all or in part (at least two, transition-property and transition-duration, is a must), to animate the transition.

All these properties must be placed along with other CSS properties of the initial state of the element:

1. transition-property: This property allows you to select the CSS properties that you want to animate during the transition(change).

Syntax:

transition-property: none | all | property | property1,
property2, ..., propertyN;

Values:
- none is used to specify that no property should be selected.
- all is used to specify all the properties to be selected, though not all properties are animate-able, only the properties which are animate-able will be influenced.
- We can specify a single property or a set of comma-separated properties property1, property2, ..., propertyN.

2. transition-duration: This property allows you to determine how long it will take to complete the transition from one CSS property to the other.

Syntax:

transition-duration: time;

Here, time can be in seconds(s) or milliseconds(ms), you should use 's' or 'ms' after the number (without quotes).

3. transition-timing-function: This property allows you to determine the speed of change and the manner of change, during the transition. Like, the change should be fast at the beginning and slow at the end, etc.

Syntax:

transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|
step-start|step-end;

Note, there are other values that this transition-timing-function can take, only the most frequent and simple are mentioned here.

4. transition-delay: This property allows you to determine the amount of time to wait before the transition actually starts to take place.

Syntax:

transition-delay: time;

Here, again, time can be in seconds(s) or milliseconds(ms), and you should use 's' or 'ms' after the number (without quotes).

The Shorthand Property You can combine all the four transition properties mentioned above, into one single shorthand property, according to the syntax given below. This saves us from writing long codes and prevents from getting messy. Note the ordering of property, it has significance.

Syntax:

transition: (property name) | (duration) | (timing function) | (delay);

The value is taken by are same as mentioned above. This property must be placed with other CSS properties, if any, of the initial state. You should use at least, property name and duration to get any animate-able effect. Also, the ordering of the values matters. The first value is of the property name, second for the duration and so on, as listed above. So, if only one number is mentioned, it will be taken up as duration, and not as a delay.

Example: Changing property without using transitions.

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Transition</title>

    <style>
        h1 {
            color: green;
            text-align: center;
        }

        div.one {
            height: 150px;
            width: 150px;
            border: 1px dashed black;
            margin: 0 auto;
            background: #FFEBEE;
        }

        div.one:hover {
            height: 300px;
            width: 300px;
            background: #BBDEFB;
        }
    </style>

</head>

<body>
    <h1>GeeksForGeeks</h1>

    <div class="one">
    </div>

</body>
</html>

Output:

change-without-transition

Example: Changing property using transitions.

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Transition</title>

    <style>
        h1 {
            color: green;
            text-align: center;
        }

        div.one {
            height: 150px;
            width: 150px;
            border: 1px dashed black;
            margin: 0 auto;
            background: #FFEBEE;
            transition: height 2s, width 2s, background 2s;
        }

        div.one:hover {
            height: 300px;
            width: 300px;
            background: #BBDEFB;
        }
    </style>

</head>

<body>
    <h1>GeeksForGeeks</h1>
    <div class="one">
    </div>

</body>
</html>