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.

Comments

[mrtoxas]

And then if you add another transition, we'll go crazy. And why do you set the duration for all background properties, if you only change the color?

/* transition-property:all; */
transition-property: background-color, transform;

[rashidyaqoob]

we are changing rotate property as well..

[mrtoxas]

Yep, but with the transition-property:background, you set the duration not only for changing the color, but also for background-position and background-size. background is shorthand css-property.
We must be careful and apply duration only to the properties that we change.