CSS3t 2

Bunch of different transitions

by James Doyle

HTML

<div class="box ease grow"></div>
<div class="box linear fadein"></div>
<div class="box ease fadeout"></div>
<div class="box ease slidedown"></div>
<br clear="all" />
<div class="box2 ease colorchange"></div>
<div class="box2 easein rotate30"></div>
<div class="box2 easeinout scaleup"></div>
<div class="box2 ease skewright"></div>

CSS

.ease {
    -webkit-transition: all 2s ease;
}/* add these classes before the transition to apply the timinig function to that animation*/
.linear {
    -webkit-transition: all 2s ease;
}
.easein {
    -webkit-transition: all 2s ease-in;
}
.easeinout {
    -webkit-transition: all 0.2s ease-in-out;
}
.box {
    float: left;
    height: 100px;
    width: 100px;
    margin: 0px 10px;
    background: #555;
    border: 1px solid #a00303;
}
.box2 {
    float: left;
    height: 100px;
    width: 100px;
    margin: 10px;
    background: #d00;
    border: 1px solid #f00303;
}
.ease.grow:hover {
    display: block;
    height: 130px;
    width: 130px;
}
.fadein {
    opacity: 0.3;
}
.fadein:hover {
    opacity: 1;
}
.fadeout {
    opacity: 1;
}
.fadeout:hover {
    opacity: 0.3;
}
.slidedown:hover {
    margin-top: 50px;
}
.colorchange:hover {
    background: #f06;
    border: 1px solid #000;
}
.rotate30:hover {
    -webkit-transform: rotate(30deg);
}
.scaleup:hover {
    -webkit-transform: scale(1.5,1.5);
}
.skewright:hover {
    -webkit-transform: skew(30deg,20deg);
}