CSS3 Transitions

 

By using CSS3, we can apply an effect when changing from one style to another, without using Flash animations or JavaScripts.

Mouse over the element will give the effect let see below:

The box below contains all attributes of transitions: width, height, background-color, transform. Hover over the box to see the effect to these properties animated.

It is so simple if you want to test on your site so just copy and paste below code

HTML Content

    
The box below contains all attributes of transitions: width, height, background-color, transform. Hover over the box to see the effect to these properties animated.
    

CSS Content

    .box {
    
    border-width: 1px;
border-style: solid;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
width:200px;
    background-color: #FFCCCC;
    height:200px;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}