CSS Jump Up Down

Assalamu'alaikum Wr.Wb.

CSS Jump Up Down Style share posting Go Blog Go kali ini bagaimana membuat suatu objek yang dituju akan bergeser ke Atas atau ke Bawah jadi seperti melompat saat mouse berada tepat diatas objek-nya, seperti Mojang dan Bujang ketahui bahwa efek ini terjadi karena ada-nya Eleman Transition dan Transform yang menjadi kunci utama, untuk lebih jelas-nya silahkan simak sendiri sama Mojang dan Bujang :

CSS Jump UP :

.jump-up {
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;
}
.jump-up:hover {
-webkit-transform:translate(0px,30px);
-moz-transform:translate(0px,-50px);
-ms-transform:translate(0px,-50px);
-o-transform:translate(0px,30px);
transform:translate(0px,-30px);
}

Perlu diketahui juga bahwa yang menentukan Efek Jump ini terjadi adalah dari :hover dimana posisi X=0 sedangkan Y=bernilai, nah Mojang dan Bujang silahkan ber-eksperimen untuk mendapatkan hasil yang diinginkan.

CSS Jump Down :

.jump-down {
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;
}
.jump-down:hover {
-webkit-transform:translate(0px,-30px);
-moz-transform:translate(0px,50px);
-ms-transform:translate(0px,50px);
-o-transform:translate(0px,-30px);
transform:translate(0px,30px);
}

CSS Objek Bergeser Ke Arah Kanan :

CSS Objek Bergeser Ke Arah Kiri :

Ck...ck...ck...ck !!! Mojang dan Bujang walau simple dan mudah dengan sedikit kreatifitas bisa dikembangkan lebih lagi CSS ini ya. Go Blog Go...!!! Amiin

Wassalam,