Situseo Blog : Seperti dijelaskan sebelumnya mengenai keunggulan css3 dalam membuat efek animasi, dengan efeknya yang lentur, halus dan banyak variasinya, serta kita bisa menggabunggkan beberapa efek-efek animasi untuk menghasilkan efek animasi css3 yang lebih unik.

Sekedar tambahan dari bahasan sebelumnya mengenai membuat efek animasi dengan css3, dibawah ini merupakan contoh-contoh tambahan efek animasi denagn css3 berserta kode css untuk membuatnya. Saya ingatkan sekali lagi, untuk hasil yang maksimal gunakan browser yang update dan yang sudah mendukung efek animasi css3, seperti Google Chrome browser.

CIRCLE

.animasi-circle {
background:#BFEE96;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
font-size:18px;
-webkit-transition: all 0.65s ease-in-out;
}
.animasi-circle:hover {
-webkit-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;
}

BIGGER

.animasi-big {
background:#BFEE96;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
font-size:18px;
-webkit-transition: all 0.65s ease-in-out;
}
.animasi-big:hover {
width: 450px;
}

BOUNCE EFEK

.animasi-bounce {
background:#BFEE96;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
font-size:18px;
-webkit-transition: all 0.65s ease-in-out;
}
.animasi-bounce:hover {
-webkit-animation-name: bounce;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
}
@-webkit-keyframes bounce {
from {
margin-left: 0px;
}
to {
margin-left: 350px;
}
}

FADE EFEK

.animasi-fade {
background:#BFEE96;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
font-size:18px;
-webkit-transition: all 0.65s ease-in-out;
}
.animasi-fade:hover {
-webkit-animation-name: fade;
-webkit-animation-duration: 3s;
}
@-webkit-keyframes fade {
0% {
opacity: 1.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1.0;
}
}

BOUNCE INFINITY

.animasi-infinitybounce {
background:#BFEE96;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
-webkit-transition: all 0.65s ease-in-out;
}
.animasi-infinitybounce:hover {
-webkit-animation-name: scale;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes scale {
from{
-webkit-transform: scale(1);
}
50%{
-webkit-transform: scale(0.85);
animation-timing-function: ease-out;
}
to{
-webkit-transform: scale(1);
animation-timing-function: ease-out;
}
}

ROTATE

.animasi-rotate {
background:#BFEE96;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
font-size:18px;
-webkit-transition: all 1.0s ease-in-out;
}
.animasi-rotate:hover {
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}

MOVE

.animasi-move {
background:#BFEE96;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
font-size:18px;
-webkit-transition: all 1.0s ease-in-out;
}
.animasi-move:hover {
-webkit-transform: translate(540px,-200px);
}

ALIGHT

.animasi-alight {
background:#BFEE96;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
font-size:18px;
-webkit-transition:all 0.65s ease-out;
-moz-transition:all 0.65s ease-out;
-ms-transition:all 0.65s ease-out;
-o-transition:all 0.65s ease-out;
transition:all 0.65s ease-out;
}
.animasi-alight:hover {
-webkit-transform:translate(0px,50px);
-moz-transform:translate(0px,-50px);
-ms-transform:translate(0px,-50px);
-o-transform:translate(0px,50px);
transform:translate(0px,-50px);
}

SKEW

.animasi-skew {
background:#BFEE96;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
font-size:18px;
-webkit-transition:all 0.65s ease-out;
-moz-transition:all 0.65s ease-out;
-ms-transition:all 0.65s ease-out;
-o-transition:all 0.65s ease-out;
transition:all 0.65s ease-out;
}
.animasi-skew:hover {
-webkit-transform:skew(30deg,20deg);
-moz-transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg);
-o-transform:skew(30deg,20deg);
transform:skew(30deg,20deg);
}

How To Use

Semoga contoh tambahan ini bisa menambah pengetahuan kita mengenai cara membuat efek animasi dengan menggunakan css3, bagi yang belum melihat contoh efek animasi sebelumnya, kalian bisa klik link membuat efek animasi dengan css3 pada bahasan sebelumnya.