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
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.
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.
</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.
</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