Home > Uncategorized > CSS3 Transition

CSS3 Transition

October 20, 2011 Leave a comment Go to comments

With css3, we can add effect when an element changing style such as when width, height etc.
To do this we need to do the following things:
a. Specify the CSS property we want to add effect.
b. Specify the duration of the effect.
Suppose we have a div with class “test”. So we can add transition effect with the following CSS style

 	div.test
        {
            width: 40px;
            height: 40px;
            background-color: #000000;
            transition: width 1s, height 1s, transform 1s, background-color 3s;
            -moz-transition: width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */
            -webkit-transition: width 1s, height 1s, -webkit-transform 1s, background-color 1s; /* Safari and Chrome */
            -o-transition: width 1s, height 1s, -o-transform 1s; /* Opera */
            text-align: center;
            font-weight: bold;
            line-height: 40px;
        }
        
        div.test:hover
        {
            width: 80px;
            height: 80px;
            transform: rotate(180deg);
            -moz-transform: rotate(180deg); /* Firefox 4 */
            -webkit-transform: rotate(360deg); /* Safari and Chrome */
            -o-transform: rotate(180deg); /* Opera */
            font-size: 25px;
            color: White;
            line-height: 80px;
            background-color: #DD1188;
            cursor: pointer;
        }

And the test div in our document

<div class="test">
</div>

Here width, height, transform, background-color will be changed gradually in 1second with a nice effect on mouse over.
Look at the property
transition: width 1s, height 1s, transform 1s, background-color 3s;
Here we set the time duration for the property change.
Note: Internate Explorer not yet support transition.

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: