Getting Started with Adobe After Effects - Part 6: Motion Blur


Upload Image Close it
Select File

Where the Technology is redefined!

Administrators

Gandhinagar Institute of Technology

Transition effect in CSS3

Nov 13 2011 5:48AM by Vivek Doshi   

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:

alt text

After:

alt text

For demo visit http://iamvivekdoshi.co.cc/transistion.html

Tags: CSS3, transistion


Vivek Doshi
308 · 0% · 141
3



Submit

Your Comment


Sign Up or Login to post a comment.

"Transition effect in CSS3" rated 5 out of 5 by 3 readers
Transition effect in CSS3 , 5.0 out of 5 based on 3 ratings
    Copyright © Rivera Informatic Private Ltd Contact us      Privacy Policy      Terms of use      Report Abuse      Advertising      [ZULU1097]