Formerly transition was done by either using AJAX or java script or by J query. This involves a lot of coding , but with CSS3 it is quite easy and simple to create this effect.This is done using the pseudo class selector (hover). No code for the event handling is required in any of the script.Look at the following code ..
#test
{
height:75px;
overflow:hidden;
background:#CCC;
width:100%;
-moz-transition:height 0.75s ease;
-webkit-transition:height 0.75s ease;
transition:height 0.75s ease;
-moz-transition:width 1.0s ease;
-webkit-transition:width 1.0s ease;
transition:width 1.0s ease;
}
#test:hover
{
height:450px;
width:50%;
-moz-transition:height 0.75s ease;
-webkit-transition:height 0.75s ease;
transition:height 0.75s ease;
}
This is the CSS code you need to achieve the effect. The HTML code is like
<body>
<div id="test">
<h1>Hover here to expand...</h1>
This is <br />
This is for the transisiton of the ...CSS3<br />
This is test for the <br />
This is CSS3<br />
This is vivekdoshiv<br />
This is web page<br />
This is webpage<br />
Hello this is CSS3 Transistion ...
<br /><hr />
</div>
</body>
With CSS3 it is quite easy to achieve the transition effect.
Snapshots:
Before:
After:
For demo visit http://iamvivekdoshi.co.cc/transistion.html
Tags: CSS3, transistion