Januari 13, 2012

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,

6 Diskusi untuk Macam Efek Hover Animasi Dengan CSS3

24 Januari 2012 23.08  

mas,, narok kode nya dimana nich :( masih newbie

25 Januari 2012 00.28  

@Aieza : kode css tersebut diatas hanya untuk memodifikasi bagian css suatu template, untuk penempatannya sendiri tergantung bagian mana yang akan dirubah atau ditambah dengan kode css diatas, sebagai contoh : animasi sliding saya pakai untuk judul post pada blog saya, untuk menjadikan itu Aieza cari dalam template kode css yang menuju judul post, biasanya kodenya .post h3 a setelah ketemu kode tersebut Aieza tambahkan kode diatas menjadui seperti ini:

.post h3 a {
-webkit-transition: all 0.65s ease-in-out;
}
.post h3 a:hover {
-moz-transform:translate(6em, 0pt);
-webkit-transform:translate(6em, 0pt);
}

contoh tersebut untuk merubah pada bagian judul post sehingga mempunyai efek animasi, atau bisa juga dipakai pada bagian lain tergantung Aieza sendiri bagian mana yang akan ditambah dengan efek animasi. semoga bisa membantu

27 Januari 2012 00.24  

saya puyeng gan mlahan'!!
nyoba gk jadi2 yg judulnya mau dibikin sliding..

25 Februari 2012 16.51  

Pak dalang, saya mau buat efek color pada judul posting saya, bagaimana caranya, mampir ke blog saya ya, untuk lihat kode judul posting pada blog saya.

10 Maret 2012 20.45  

Sudah lama saya menunggu jawaban pertanyaan saya, e ternyata sudah ada jawabanya diatas, kurang teliti saya, thank mas dalang:)

17 Maret 2013 01.19  

kren Pak Dalang....

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top