Tuesday, August 27, 2013

Transition duration

It is yet another good attribute I came across. Let me tell an example. Let us consider we have a division tag with CSS defined as follows.
Refer : Browser Specific Defenitions


<div class='test'>
This is a test div.
</div>

.test{
 border:1px solid black;
 color:white;
 background-color:black;
 border-radius:10px 20px;
padding:10px;
}
.test:hover{
  border-radius:20px 10px;
}

This is a test div with no Transition Duration.

In the above test division, when the mouse is moved over it, the border-radius property changes immediately. Whereas in the following division, when the mouse is moved over the it, the border-radius property changes slowly and gets ended up in 1 second. This is how this property works.

<div class='test'>
This is a test div.
</div>

.test{
 border:1px solid black;
 color:white;
 background-color:black;
 border-radius:10px 20px;
-moz- transition-duration:1s;
-ms-transition-duration:1s;
-goog-ms-transition-duration:1s;
padding:10px;
 }
.test:hover{
 border-radius:20px 10px;
}

This is a test div with transition duration attribute.

No comments :

Post a Comment