DEV Community

rashidyaqoob
rashidyaqoob

Posted on

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.

Discussion (3)

Collapse
mrtoxas profile image
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;
Enter fullscreen mode Exit fullscreen mode
Collapse
rashidyaqoob profile image
rashidyaqoob Author

we are changing rotate property as well..

Collapse
mrtoxas profile image
mrtoxas • Edited on

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.