CSS3 Transitions

CSS3 Transitions

Transitions is an another effect of css3 by this effect we can change property values smoothly.

Example:

Go to this link and check out the live example of below codding .

<htm>

<head>

<title>csszilla</title>

<style>

.transitions1{background-color:#999933; color:#FFFFFF; width:100px; height:100px;

font-size:18px; text-align:center; border-radius:40px; padding-top:50px;

transition: width 1s;

}

p:hover {width: 300px;}

div {

width: 200px;

height: 100px;

background: green;

transition: width 1s, height 1s;

color:white;

text-align:center;

padding-top:50px;

font-size:24px;

border-radius:30px;

}

div:hover {

width: 400px;

height: 140px;

}

</style>

</head>

<body>

<h1 style="text-align:center; color:#FF9900;"> Its CSS3 transitions effects</h1>

<p class="transitions1"> Its 3D transition with width</p><br /><br /><br />

<div>its 3d transition with width and heigth

</div>

</body>

</html>

thanks
Emraan Ali

Css Zilla