CSS TRANSITION PROPERTY

Hey, folks.
Today we will be learning the important property in CSS called TRANSITION property.
Transition means change of state. In CSS we have properties like :hover,:focus,:active etc . Instead of changing instantly, we have some handful transition properties, So let's see how they work.

1.Transition-duration:This property specifies how many secs or millisecs a transition should take to complete.

div{
    transition-duration: 1s;
  }

The time you can specify in secs(s) ormillisecs(ms). For good practice we should kept it in a range of 250ms-500ms.

2.Transition-property: This specifies what actually you want to transition.

 div{
     background-color:green;
     transition-property: background;
    }

 div:hover{
    background-color:blue;
    }

Here, if you see, we are telling CSS that we wanna make transition to background. Now, when we hover on the div the background-color gets transition and hence changes its color.
Now, if we have two properties which we want to transition say background-color and rotate, we can write it like this.

 div{
      background-color:green;
      transition-duration:500ms;
      transition-property:all;
    }

 div:hover{
       background-color:blue;
       transform: rotate(45deg);
           }

Here, instead of writing all properties which we want to make transition we can write simply transition-property:all;.

We have some other properties of transition which will be discussed in next posts.