Macam Efek Hover Animasi Dengan CSS3

Situseo Blog : 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.

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)

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

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

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;}}

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;}}

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,