Simple CSS FX
http://www.webdesignerdepot.com/?p=65974
by brasofilo
HTML
<link href="http://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet" type="text/css">
<div class="fade">Fade</div>
<div class="color">Color</div>
<div class="grow">Grow</div>
<div class="shrink">Shrink</div>
<div class="rotate">Rotate</div>
<div class="circle">Circle</div>
<div class="threed">3D</div>
<div class="swing">Swing</div>
<div class="border">Border</div>CSS
body > div {
margin: 41px 49px;
width: 283px;
height: 198px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 198px;
transition: all 0.3s ease;
float:left;
}
.fade {
opacity:0.5;
}
.fade:hover {
opacity:1;
}
.color:hover {
background:#53a7ea;
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
.shrink:hover {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
.rotate:hover {
-webkit-transform: rotateZ(-30deg);
-ms-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
}
.circle:hover {
border-radius:50%;
}
.threed:hover {
box-shadow: 1px 1px #53a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea;
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
@-webkit-keyframes swing {
15% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65% {
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80% {
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes swing {
15% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65% {
-webkit-transform: translateX(-3px);
transform:...