CSS3t

Some class transitions

by James Doyle

HTML

<div class="box ease fadein">fadein class</div>
<div class="box ease grow">grow class</div>
<div class="box ease scaleup">scaleup class</div>

CSS

.ease {
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.fadein {
    opacity: 0.3;
}
.fadein:hover {
    opacity: 1;
}
.grow:hover {
    height: 250px;
}
.scaleup:hover {
    -webkit-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
}
.box {
    float: left;
    color: #fff;
    margin: 0px 15px;
    height: 100px;
    width: 100px;
    border: 2px solid blue;
    background: black;
}