A webpage looks more convenient with a little bit of animation in it. While expanding a module or opening a popup or on hovering of a clickable button/link, we can show a slowmo effect. This little animation we can achieve through the transition property of CSS.

The transition effect changes the property values smoothly over a provided duration. We can create a transition effect by following.

transition: transition-property transition-duration transition-delay transition-timing-function;

transition-property

The property name on which we want to apply the transition effect. Like width, height, color etc.

transition-duration

The total duration of transition effect in seconds or milliseconds.

transition-delay

The time delay of the transition effect to start in seconds.

transition-timing- function

The speed curve of transition effect. This can have following values

• linear – Effect runs at same speed from start to end.
• ease – Effect starts slowly then fast, then end slowly.
• ease-in – Effect starts slowly.
• ease-out – Effect ends slowly.
• ease-in-out – Effect starts slowly and ends slowly.
• cubic-bezier(n,n,n,n) – we can define our own values.

<div class="box"> </div>

.box {
     width: 200px;
     height: 200px;
     background: blue;
     transition: background 3s 1s linear;
}
.box:hover {
   background: red;
}

Here on hover of the div after 1 second delay, the background will change smoothly in 3 seconds.

To add transition effect to multiple properties, we can specify all properties separated by commas.

.box {
    width: 200px;
    height: 200px;
    background: blue;
    transition: background 3s 1s linear, width 4s;
}
.box:hover {
    background: red;
    width: 300px;
}

If we want to apply same effect to all the properties, then we can provide the transition-property value as “all”.

.box {
    width: 200px;
    height: 200px;
    background: blue;
    transition: all 3s;
}

.box:hover {
    background: red;
    width: 300px;
    height: 300px;
}

We can also set the transition properties individually.

.box {
    width: 200px;
    height: 200px;
    background: blue;
    transition-property: all;
    transition-duration: 5s;
    transition-delay: 2s;
    transition-timing-function: ease-out;
}
.box:hover {
    background: red;
    width: 300px;
    height: 300px;
}

Now you have learned about the transition property and how to use it to show animation effect.

Amitav Mishra

Web Developer by Profession, Blogger by Passion.
JavaScript | React | Next |  Angular | Vue | HTML | CSS