Macam Efek Hover Animasi Dengan CSS3

 Membuat efek hover animasi dengan css3 berikut contohnya, selain mudah dalam penggunaan, css3 mempunyai keunggulan lain yaitu dalam bidang efek hover, selain lebih variatif, efek-efek hover ini berjalan mulus dan halus, sayangnya keberadaan css3 dengan efek-efeknya, terutama efek animasinya, belum didukung penuh oleh browser-browser yang ada. Untuk menikmati secara maksimal efek animasi css3, saya sarankan untuk mengunakan google chrome sebagai browser yang sudah mendukung efek animasi css3.

Dibawah ini beberapa contoh efek hover dengan mengunakan css3 beserta kode-kode yang menghasilkan efek tersebut, sebagai acuan untuk mengkobinasikan efek-efek yang ada sehingga menghasilkan efek-efek yang lebih unik.

h3.animasi_dalang1 { color: #666; width: 250px; height: 50px; font-size: 18px; text-align: center; background: #808080; -webkit-transition: all 0.65s ease-in-out; -moz-transition: all 0.65s ease-in-out; -o-transition: all 0.65s ease-in-out; transition: all 0.65s ease-in-out;} h3.animasi_dalang1:hover { -webkit-transform:translate(0px, -20px); -moz-transform:translate(0px, -20px); -o-transform:translate(0px, -20px); -transform:translate(0px, -20px); }

DALANG ERROR 1

.animasi_dalang1 {
color: #666;
width: 250px;
height: 50px;
font-size: 18px;
text-align: center;
background: #808080;
-webkit-transition: all 0.65s ease-in-out;
-moz-transition: all 0.65s ease-in-out;
-o-transition: all 0.65s ease-in-out;
transition: all 0.65s ease-in-out;

}
.animasi_dalang1:hover {
-webkit-transform:translate(0px, -20px);
-moz-transform:translate(0px, -20px);
-o-transform:translate(0px, -20px);
-transform:translate(0px, -20px);
}

Dengan animasi ini bisa menghasilkan efek kesegala arah, baik kanan, kiri, atas, bawah, serong atas, kiri, atas, bawah hanya dengan merubah bagian angka (0px, -20px) untuk lebih jelasnya bisa lihat contohnya disini. Untuk kode css selanjutnya, saya tidak menampilkan kode css yang berwarna biru, saya anggap sudah termasuk dalam kode (biar tidak terlalu panjang)

h3.animasi_dalang2 { color: #666; width: 250px; height: 50px; font-size: 18px; text-align: center; background: #808080; -webkit-transition: all 0.65s ease-in-out; -moz-transition: all 0.65s ease-in-out; -o-transition: all 0.65s ease-in-out; transition: all 0.65s ease-in-out;} h3.animasi_dalang2:hover { -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg); }

DALANG ERROR 2

.animasi_dalang2 {
-kode css lainnya-
}
.animasi_dalang2:hover {
-webkit-transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
}

ini merupakan efek putar, kalian bisa menyesuikan putarannya, apakah mau penuh (360deg) atau hanya setengah putaran, untuk merubah arah putaran bisa tambahkan tanda minus - untuk perputarannya

Untuk efek selanjutnya, browser Opera belum suport hanya bisa berjalan baik dengan browser Chrome dan Firefox

h3.animasi_dalang3 { color: #666; width: 250px; height: 50px; font-size: 18px; text-align: center; background: #808080; -webkit-transition: all 0.65s ease-in-out; -moz-transition: all 0.65s ease-in-out; -o-transition: all 0.65s ease-in-out; transition: all 0.65s ease-in-out;} h3.animasi_dalang3:hover { -webkit-transform:scale(-1.0); -moz-transform:scale(-1.0); transform:scale(-1.0); }

DALANG ERROR 3

.animasi_dalang3 {
-kode css lainnya-
}
.animasi_dalang3:hover {
-webkit-transform:scale(-1.0);
-moz-transform:scale(-1.0);
transform:scale(-1.0);
}

dengan efek ini bisa menghasilkan efek membesar (zoom) atau sebaliknya mengecil hanya dengan merubah scale-nya

h3.animasi_dalang4 { color: #666; width: 250px; height: 50px; font-size: 18px; text-align: center; background: #808080; } h3.animasi_dalang4:hover { animation: blur 1s infinite; -moz-animation: blur 1s infinite; -webkit-animation: blur 1s infinite; } @-webkit-keyframes blur { 0% {-webkit-box-shadow: 0px 0px 50px #fff;} 25% {-webkit-box-shadow: 0px 0px 50px #808080;} 50% {-webkit-box-shadow: 0px 0px 50px #000;} 75% {-webkit-box-shadow: 0px 0px 50px #808080;} 100% {-webkit-box-shadow: 0px 0px 50px #fff;}} @-moz-keyframes blur { 0% {-moz-box-shadow: 0px 0px 50px #fff;} 25% {-moz-box-shadow: 0px 0px 50px #808080;} 50% {-moz-box-shadow: 0px 0px 50px #000;} 75% {-moz-box-shadow: 0px 0px 50px #808080;} 100% {-moz-box-shadow: 0px 0px 50px #fff;}} @-keyframes blur { 0% {box-shadow: 0px 0px 50px #fff;} 25% {box-shadow: 0px 0px 50px #808080;} 50% {box-shadow: 0px 0px 50px #000;} 75% {box-shadow: 0px 0px 50px #808080;} 100% {box-shadow: 0px 0px 50px #fff;}}

DALANG ERROR 4

.animasi_dalang4 {
color: #666;
width: 250px;
height: 50px;
font-size: 18px;
text-align: center;
background: #808080;
}
.animasi_dalang4:hover {
animation: blur 1s infinite;
-moz-animation: blur 1s infinite;
-webkit-animation: blur 1s infinite;
}
@-webkit-keyframes blur {
0% {-webkit-box-shadow: 0px 0px 50px #fff;}
25% {-webkit-box-shadow: 0px 0px 50px #808080;}
50% {-webkit-box-shadow: 0px 0px 50px #000;}
75% {-webkit-box-shadow: 0px 0px 50px #808080;}
100% {-webkit-box-shadow: 0px 0px 50px #fff;}}
@-moz-keyframes blur {
0% {-moz-box-shadow: 0px 0px 50px #fff;}
25% {-moz-box-shadow: 0px 0px 50px #808080;}
50% {-moz-box-shadow: 0px 0px 50px #000;}
75% {-moz-box-shadow: 0px 0px 50px #808080;}
100% {-moz-box-shadow: 0px 0px 50px #fff;}}
@-keyframes blur {
0% {box-shadow: 0px 0px 50px #fff;}
25% {box-shadow: 0px 0px 50px #808080;}
50% {box-shadow: 0px 0px 50px #000;}
75% {box-shadow: 0px 0px 50px #808080;}
100% {box-shadow: 0px 0px 50px #fff;}}

h3.animasi_dalang5 { color: #666; width: 250px; height: 50px; font-size: 18px; text-align: center; background: #808080; } h3.animasi_dalang5:hover { animation: border 5s infinite; -moz-animation: border 5s infinite; -webkit-animation: border 5s infinite; } @-webkit-keyframes border { 0% {-webkit-border-radius: 0px;} 20% {-webkit-border-radius: 0 0 0 25px;} 40% {-webkit-border-radius: 0 25px 0 25px;} 60% {-webkit-border-radius: 0 25px 25px 25px;} 80% {-webkit-border-radius: 25px;} 100% {-webkit-border-radius: 0px;}} @-moz-keyframes border { 0% {-moz-border-radius: 0px;} 20% {-moz-border-radius: 0 0 0 25px;} 40% {-moz-border-radius: 0 25px 0 25px;} 60% {-moz-border-radius: 0 25px 25px 25px;} 80% {-moz-border-radius: 25px;} 100% {-moz-border-radius: 0px;}} @keyframes border { 0% {border-radius: 0px;} 20% {border-radius: 0 0 0 25px;} 40% {border-radius: 0 25px 0 25px;} 60% {border-radius: 0 25px 25px 25px;} 80% {border-radius: 25px;} 100% {border-radius: 0px;}}

DALANG ERROR 5

.animasi_dalang4 {
color: #666;
width: 250px;
height: 50px;
font-size: 18px;
text-align: center;
background: #808080;
}
.animasi_dalang5:hover {
animation: border 5s infinite;
-moz-animation: border 5s infinite;
-webkit-animation: border 5s infinite;
}
@-webkit-keyframes border {
0% {-webkit-border-radius: 0px;}
20% {-webkit-border-radius: 0 0 0 25px;}
40% {-webkit-border-radius: 0 25px 0 25px;}
60% {-webkit-border-radius: 0 25px 25px 25px;}
80% {-webkit-border-radius: 25px;}
100% {-webkit-border-radius: 0px;}}
@-moz-keyframes border {
0% {-moz-border-radius: 0px;}
20% {-moz-border-radius: 0 0 0 25px;}
40% {-moz-border-radius: 0 25px 0 25px;}
60% {-moz-border-radius: 0 25px 25px 25px;}
80% {-moz-border-radius: 25px;}
100% {-moz-border-radius: 0px;}}
@keyframes border {
0% {border-radius: 0px;}
20% {border-radius: 0 0 0 25px;}
40% {border-radius: 0 25px 0 25px;}
60% {border-radius: 0 25px 25px 25px;}
80% {border-radius: 25px;}
100% {border-radius: 0px;}}

h3.animasi_dalang6 { color: #666; width: 250px; height: 50px; font-size: 18px; text-align: center; background: #808080; -webkit-transition: all 0.65s ease-in-out; -moz-transition: all 0.65s ease-in-out; -o-transition: all 0.65s ease-in-out; transition: all 0.65s ease-in-out;} h3.animasi_dalang6:hover { animation: border 5s infinite; -moz-animation: border 5s infinite; -webkit-animation: border 5s infinite; } -webkit-keyframes gobig { 0% {top:0px;width:250px; background:#808080;} 25% {top:0px;width:300px;background:#333;} 50% {top:50px; width:300px;background:#ccc;} 75% {top:0px;width:300px;background:#ccc;} 100% {top:0px;width:250px;background:#808080;}} -moz-keyframes gobig { 0% {top:0px;width:250px; background:#808080;} 25% {top:0px;width:300px;background:#333;} 50% {top:50px; width:300px;background:#ccc;} 75% {top:0px;width:300px;background:#ccc;} 100% {top:0px;width:250px;background:#808080;}} keyframes gobig { 0% {top:0px;width:250px; background:#808080;} 25% {top:0px;width:300px;background:#333;} 50% {top:50px; width:300px;background:#ccc;} 75% {top:0px;width:300px;background:#ccc;} 100% {top:0px;width:250px;background:#808080;}}

DALANG ERROR 6

.animasi_dalang6 {
color: #666;
width: 250px;
height: 50px;
font-size: 18px;
text-align: center;
background: #808080;
position: relative;
}
.animasi_dalang6:hover {
animation: border 5s infinite;
-moz-animation: border 5s infinite;
-webkit-animation: border 5s infinite;
}
@-webkit-keyframes gobig {
0% {top:0px;width:250px; background:#808080;}
25% {top:0px;width:300px;background:#333;}
50% {top:50px; width:300px;background:#ccc;}
75% {top:0px;width:300px;background:#ccc;}
100% {top:0px;width:250px;background:#808080;}}
@-moz-keyframes gobig {
0% {top:0px;width:250px; background:#808080;}
25% {top:0px;width:300px;background:#333;}
50% {top:50px; width:300px;background:#ccc;}
75% {top:0px;width:300px;background:#ccc;}
100% {top:0px;width:250px;background:#808080;}}
@keyframes gobig {
0% {top:0px;width:250px; background:#808080;}
25% {top:0px;width:300px;background:#333;}
50% {top:50px; width:300px;background:#ccc;}
75% {top:0px;width:300px;background:#ccc;}
100% {top:0px;width:250px;background:#808080;}}

Saya kira cukup contoh-contoh efek hover animasi menggunakan css3, bagaimana cara pengaplikasiannya terhadap template blog? sebagai gambaran, kalian bisa membaca disini.

Semoga bermanfaat,
http://situseo.blogspot.com/ 

Pos ini dipublikasikan di blog tutorial. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s